Choosing the Correct Embed Code

Product(s)
Video Cloud
Role(s)
Studio User
Player Developer
Task(s)
Publish Videos
Topic(s)
Playback

This topic provides an overview of the types of embed code that are available when publishing videos using the Media module.

When publishing videos using the Media module, you can use the player URL to preview the video or copy the iframe or In-Page embed code to paste into your web page or application.

Note: Click the Shorten button next to the preview URL to generate a shortened preview URL.

The Standard link displays the iframe embed code and the Advanced link displays the In-Page embed code. From the Player Management API perspective, you will also see the Advanced player code referred to as the embed_in_page implementation.

Note: For information on working with responsive players, see the Responsive Sizing for the Brightcove Player developer document.

iframe embed code (Standard)

Typical iframe embed code will appear as follows:

<iframe src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.html?videoId=5076962725001"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen></iframe>

Some advantages of using the iframe embed code

  • No collisions with existing JavaScript and/or CSS
  • Automatically responsive
  • The iframe eases use in social media apps or whenever the video will need to "travel" into other apps

In-Page embed code (Advanced)

Typical in-page embed code will appear as follows:

<video-js data-video-id="5076962725001"
data-account="1507807800001"
data-player="BkTGbgSq"
data-embed="default"
data-application-id
class="video-js"
controls></video-js>
<script src="https://players.brightcove.net/1507807800001/BkTGbgSq_default/index.min.js"></script>

Although integrating the In-Page publishing code can be more complex, using the In-Page code is best when the page containing the player needs to communicate with the player. Some examples of when to use the In-Page embed code include:

  • The code in the containing page needs to listen for and act on player events
  • The player uses styles from the parent page
  • The iframe code will cause application logic to fail, like a redirect from the parent page

Even if your final implementation does not use the iframe embed code, you can still use the In-Page code with a plugin for your JavaScript and a separate file for your CSS. This encapsulates your logic so that you can easily use it in multiple players.

Chrome and "broken" HTML video icon

Chrome versions 67+ will display a broken video icon momentarily until the <video ...> tag gets converted into a Brightcove Player. The icon appears as follows:

chrome broken video icon

If you are using Brightcove Player version 6.11+, you change the video tag to <video-js ...> and you will NOT see the icon.

Recommendation

It is considered a best practice to use the iframe implementation unless some application logic requires the use of the In-Page code.