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.
We used event listeners to trigger calls to YouTube’s API to pause and play the videos with API functions.
Add the custom HTML snippet to the Settings Panel of your Ceros experience.
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.
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.
div idwith a unique word to identify the video. In this example, the div id is
vid-selectunder Current Selection in the Tags field.
opentag 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.