Extensions | YouTube Control

YouTube Control

Auto-pause iframed Youtube videos when out of view

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!

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

How to implement

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>

Add Custom HTML Object

  • Click to add a YouTube video to your Ceros canvas.

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.

Edit Embed Code

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

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 "?"

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.

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

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.