Using Dynamic Video Overrides in an In-Page Experience
There may be times when you want to change the videos in an In-Page Experience. For example, maybe the videos in an experience need to change based upon a selection the user makes or based upon navigating to other parts of a site. Instead of creating new In-Page Experiences, each with a different set of videos, it is possible to modify the embed code to assign the appropriate videos to an experience. Changes to the embed code vary based upon the type of embed code that is being used:
Recommended embed code
Typical In-Page Experience embed code (Recommended option) looks like the following:
<div data-experience="597a2aa114b2ed00103052af"></div>
<script src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/live.js"></script>
To dynamically override the videos associated with an In-Page Experience, the embed code can be changed to add an attribute to the div tag to specify the videos or the playlist to be used.
Specifying individual videos
To specify individual videos to use, add the data-video-ids parameter to the div tag and then specify a comma-delimited list of video IDs.
<div data-experience="597a2aa114b2ed00103052af"
data-video-ids="12345,56789"></div>
<script src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/live.js"></script>
Specifying a playlist
To specify a playlist to use, add the data-playlist-id parameter to the div tag and then specify the playlist ID to use.
<div data-experience="597a2aa114b2ed00103052af"
data-playlist-id="12345"></div>
<script src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/live.js"></script>
No JavaScript embed code
Typical In-Page Experience embed code (No JavaScript option) looks like the following:
<iframe style="display:block;border:none;margin-left:auto;margin-right:auto;"
src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/index.html"
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
To dynamically override the videos associated with an In-Page Experience, the embed code can be changed to add a parameter to the src attribute.
Specifying individual videos
To specify individual videos to use, add the videoIds parameter and then specify a comma-delimited list of video IDs.
<iframe style="display:block;border:none;margin-left:auto;margin-right:auto;"
src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/index.html?videoIds=12345,56789""
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
Specifying a playlist
To specify a playlist to use, add the playlistId parameter and then specify the playlist ID to use.
<iframe style="display:block;border:none;margin-left:auto;margin-right:auto;"
src="https://players.brightcove.net/20318290001/experience_597a2aa114b2ed00103052af/index.html?playlistId=12345"
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>