YouTube Control

Auto-pause iframed Youtube videos when out of view

On a non-Ceros web page, an iframed YouTube video will not pause automatically when it’s out of view. This plugin was built to give you better control to pause Youtube videos when hidden so you can achieve a seamless user-experience and prevent that annoying after-play.

How we did it

We used event listeners to trigger calls to YouTube’s API to pause and play the videos with API functions.

Import Demo Experience

What you need

  • The custom HTML snippet
  • A Ceros experience
  • A URL for your favorite YouTube video
  • Note: if you import the demo to your Ceros account, you’ll need to add the custom HTML snippet yourself for it to function. We’re working on a smoother experience. In the meantime, help us help you!

How to implement

  • 1

    Add Custom HTML Script

    Add the custom HTML snippet to the Settings Panel of your Ceros experience.

    <script id="youtube-plugin" src="https://creative-services.ceros.com/customer-success/youtube-pause/v2/main.js"></script>

  • 2

    Add Custom HTML Object

    Click  to add a YouTube video to your Ceros canvas.

  • 3

    Add YouTube Embed

    • Click  to open the Inspector Panel. Within the Inspector Panel, click  to open the Embed Code Field.
    • Add the formatted embed code below: 
      <div id="unique"><iframe width="500" height="315" src="https://www.youtube.com/embed/lj1E-Gc5RyQ?enablejsapi=1&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe></div>
    • This is not the exact embed code that you get from Youtube. The code above includes a div identifier, some controls to autoplay the video and hide related videos, and an enablejsapi=1 parameter to link up to the SDK.

  • 4

    Edit Embed Code

    • Replace the div id with a unique word to identify the video. In this example, the div id is unique

  • 5

    Replace src URL

    • Replace the src URL with the src URL for your specific Youtube video. You can find this in the Embed Video panel in the Share section of the Youtube page.
    • Ensure you only replace the beginning of the URL ending at “?”

  • 6

    Tag & Payload HTML Object

    • With the HTML Object selected, open the SDK panel by clicking  and enter the code vid-select under Current Selection in the Tags field.
    • In the Payload field, add the div id from before. In this example the payload is unique.

  • 7

    Set Up Hotspot

    • With your Hotspot that will be used to hide the video selected, apply an interaction of On Click > Hide > and the embedded video object as the target.
    • With the hotspot still selected, navigate to the SDK panel and apply a close tag.
    • In the payload field, add the div id from earlier. In this example the payload is unique

  • 8

    Test Your Experience

    • Load up a preview window to test your experience. When you hide the video by clicking on the hotspot set up earlier, the video should stop playing.
    • Additionally, you can also add an open tag to an another hotspot on your canvas to play the video when the layer is shown. Ensure your interaction for this hotspot is set up to show the embedded video layer, and your payload uses the same div id as earlier.

Import Demo Experience