Inserting a Brightcove Player into a Web Page or Pop-up Window

Whether you’re a publisher or an affiliate , you copy and paste the provided Player publishing code to:


To insert the Player in a web page:

  1. Open your destination web page for editing, and then paste the copied Player publishing code (whether IFRAME, JavaScript, or HTML to Embed) the same way you would add an image or other inline code element.

    For example: You can place the Player in any standard container, such as a table cell or division (HTML <div> tag) within the opening and closing <body> tags for the page.


  2. [Optional] Edit the Brightcove player publisher code now or later.


  3. [Optional] Preview your Player locally.

    If you encounter an unexpected Macromedia Flash Player Security message: You may need to modify your Flash Player security settings before you can view the Player correctly.

  4. Save the page and upload it to your web server.

There are no additional files to upload because the Player and video content load from the Brightcove service. The Brightcove service takes care of all hosting, bandwidth and storage for video content—so a Brightcove Player does not place any additional load on your web server or web hosting service.



To insert the Player in a pop-up window:

  • Method 1. This is the easiest. Use this method if you are a publisher who chose to have Brightcove host your Player in a web page for you. (Players > Settings > "Use Brightcove to host this player")
  • Method 2. Use this method if you did NOT choose to have Brightcove host your Player in a web page for you.

Method 1: When Brightcove hosts your player in a web page

  1. Copy the Pop-up code provided on the Hosted Player tab (Players > player_name > Get Player Code).
  2. Paste the code into the web page where you want the pop-up to be available. Modify the HTML as required, such as changing the link text.

By default, the name of the Player is used for the pop-up link text.


Method 2: If your player is not hosted in a Brightcove provided web page

You copy and paste the publishing code into a new web page. Then use JavaScript on your own web page to open the pop-up window.

  1. Find out the dimensions (in pixels) of your Brightcove Player:
    In the Brightcove Console, choose the Players tab, select the player on the left, then click the Get Publishing Code button on the lower right. In the JavaScript tab, scroll down and look for the number values for “config [“width”] =” and “config [“width”] =”.

  2. Create a new web page that includes JavaScript to open a pop-up window the same size as your Brightcove Player.

    Below is sample code for a web page that opens a Brightcove Player in a 520x509 pixel pop-up window. You can use this code and insert the dimensions for your Player.

    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Brightcove Sample Webpage for Opening a Pop-up Player</title>
    <script type="text/JavaScript">
    <!--
    function openWindow(theURL,winName,features) {
    window.open(theURL,winName,features);
    }
    //-->
    </script>
    </head>
    <body onclick="openWindow('popup.html','BrightcovePlayer','width=520,height=509')">
    <a href="#">Watch Now!</a>
    </body>
    </html>

  3. Create the web page for your pop-up window, using the sample code below or by creating your own page.


    4. By default, most browsers display web pages with a small margin: To disable this additional margin, note the use of  the following margin attributes set to 0 within the body tag of the pop-up page sample below. <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>
    <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

    <!-- Paste the code for your Brightcove Player Below -->

    </body>
    </html>

  4. Copy the JavaScript player publishing code and paste it in between the opening and closing body tags in the pop-up page (as shown in the sample code above).

  5. [Optional] Preview your Player.


    6. If you open your web page from your local computer for testing and have domain restrictions enabled, the Brightcove Player may not display correctly. You will need to upload the Player to a website with the domain specified in the domain restriction (Players > Security > Restrict the player to your web domain? > Restricted Domain) to view your content. This protects your video content from being loaded into third-party sites without your approval.

  6. [Optional] Edit the Player publishing code.