Using Multiple Players on One Page

In this topic, you will learn how to use multiple Brightcove Players on a single HTML page.

Multiple players

If you are using multiple players on the same page, there is nothing special you need to do. For instance, it is perfectly acceptable to have the following players on the same page.

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

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

Note: If you are a Brightcove Player customer, you will not use the data-video-id attribute to assign a video to your player. You would either assign the video in the Players module or using curl.

Special considerations

Be aware of the following when placing multiple players on the same HTML page:

You can use multiple instances of the same player on same page, using a single index.min.js file. We strongly recommend using one index.min.js file if possible, as this saves considerable amounts of page load time.
It can be very expensive bandwidth-wise to have multiple players on a page and have the preload set to auto. It is generally not recommended.
You cannot use multiple players on the same page that are from different accounts where both players use the player ID value of default. (As a reminder, in the Advanced player code the player ID is used in the data-player attribute.) The workaround is to duplicate one of the default players so it has a unique identifier.
If you're using IE11 and have multiple instances of the same player on a page, you need to either be sure each player instance has a unique value for the id attribute or use no id attributes.
Mixing in-page players of different versions is not supported. It may work for similar versions, but can easily cause problems. Use iframes if you need to mix players of different versions. If the players are of the same version, it should be fine.
When mixing in-page players, the global bc will refer to the last player in the page.
There are known issues when attempting to use AMD module loaders like RequireJS and multiple in-page players. We don't have a workaround for this at the moment.
When embedding multiple 360 videos on a page with the advanced embed code, only the first video can have 360 interactivity. The workaround is to use the basic (iframe) embed to allow multiple 360 videos to have interactivity.
Mixing players with 360 videos and players with non-360 videos is not supported.
If multiple players have the same id on one page and specify different size inside <video> tag using width and height attributes, the player CSS from the last player is applied to all players.
Workarounds
- Use players with different player IDs if you want them to have different sizes or styling
- Define a classes for the players that provide the player sizing using CSS, and add the classes to the video tags for the different players