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.

How to implement

1. Add Custom HTML Script

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

2. Add Embedded Object & Get Your YouTube Embed Code

Click @TODO: icon to add an Embedded Object area to the canvas, and paste your YouTube video’s embed code into it.

To get the YouTube embed code, navigate to the video, click the “Share” button, then click “Embed” and copy the code.

3. Add Modified YouTube Embed Code

• Add the formatted embed code below:

• 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.

  We’ll go over these changes in the following steps.

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 the Embedded Object tool icon in the left toolbar (looks like </>) 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.