Choosing the Correct Embed Code
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.
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.
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
- Automatically responsive
- The iframe eases use in social media apps or whenever the video will need to be used in an outside environment; for instance, Facebook will perceive the security threat is much less when the iframe is used versus putting the
In-Page embed code (Advanced)
Typical in-page embed code will appear as follows:
<video data-video-id="5076962725001" data-account="1486906377" data-player="default" data-embed="default" data-application-id class="video-js" controls></video> <script src="//players.brightcove.net/1486906377/default_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
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:
If you are using Brightcove Player version 6.11+, you change the
video tag to
<video-js ...> and you will NOT see the icon.
It is considered a best practice to use the iframe (Standard) implementation unless some application logic requires the use of the In-Page code. If you are using the Audience module to track viewer engagement, the In-Page (Advanced) embed code must be used.