To embed a Slide Sync Experience on a web page, you will complete the following steps:
Adding CSS to the parent web page container
In order to make Slide Sync display properly on your webpage, you must add a few lines of custom CSS. Add the following CSS code to the style sheet of the webpage that you are embedding on:
body {
overflow: hidden;
}
.experienceIframeContainer {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 75%;
}
.experienceIframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}Adding the embed code container to the webpage
Next, add this snippet of HTML to the page you want to embed the Slide Sync Experience on:
<div id="experienceIframeContainer">
<iframe class="experienceIframe" src="[ADD SLIDE SYNC LANDING PAGE URL HERE]" allowfullscreen>
</iframe>
</div>Configuring the iFrame to display the Slide Sync Experience
Finally, swap out the text in the iFrame src with the Slide Sync URL landing page. To get the landing page URL for the Slide Sync Experience, follow these steps:
- Login to Brightcove Interactivity Studio.
- In the left navigation, click Manage.
- Click Experiences at the top of the page.
- Click on an experience to open it.
- Click .
- Click Landing Page.
- In the OPTIONS section, set Use Native Controls? to Yes. When publishing a Brightcove video, this will display the Brightcove Player native controls. If No is selected, the player will display the HapYak player native controls.
- Click to copy the embed code link.
- Add the embed code URL to the
srcparameter of the embed code added in the previous section.
Code example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedded Slide Sync Experience Example</title>
<style>
body {
overflow: hidden;
}
.experienceIframeContainer {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 75%;
}
.experienceIframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="experienceIframeContainer">
<iframe class="experienceIframe"
src="//www.hapyak.com/portal/experience/viewer/adccab61bc5f4fea9a78fa1b994c89ab" allowfullscreen
</iframe>
</div>
</body>
</html>