Product Updates | Contact Support | System Status
Page Contents

    Embedding a Slide Sync Experience on a Web Page

    In this topic you will learn how to embed a Slide Sync Experience on a web page.

    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:

    1. Login to Brightcove Interactivity Studio.
    2. In the left navigation, click Manage.
    3. Click Experiences at the top of the page.
    4. Click on an experience to open it.
    5. Click SHARE.
    6. Click Landing Page.
    7. 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.
    8. Click COPY to copy the embed code link.
    9. Add the embed code URL to the src parameter 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>

    Page last updated on 02 Aug 2022