Click here to copy SDK Script
About This Plugin
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 they're hidden so you can achieve a seamless user experience and prevent that annoying after-play.
Click here to import Demo Experience
We used event listeners to trigger calls to YouTube’s API to pause and play the videos with API functions.
How We Did It
How To Implement
Step 1: Add the Custom HTML Script
• Copy the SDK Script below and paste it into the Custom HTML field within the Settings panel in the Ceros Studio. Press OK to finish and close the panel.
Step 2: Add Embedded Object & Modified YouTube Embed Code
• Create an Embedded Object on your canvas with the Embed Object tool. Copy the modified YouTube embed code below and, with your Embedded Object selected, paste the code into the Enter embed code field within the Design tab.
Step 3: Edit Embed Code
Step 4: Replace "src" URL for YouTube Video
• Replace the provided embed code's src URL with the src URL for the specific YouTube video you wish to embed. 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 “?”
Step 5: Add Tag & Payload to Embedded Object
• With the Embedded Object selected, open the SDK Panel and add the tag vid-select within the second Enter Tag field beneath the SDK ID. Press Enter/Return to finish adding this tag.
• In the Payload field just beneath the second Enter Tag field, add the div id we added to our modified embed code in Step 3. In our demo example, the div id/payload is demovid. Your tag and payload for the Embedded Object should look similar to this when finished:
Step 6: Set Up Control Hotspot
• Create a hotspot that will be used to pause your YouTube video. With this hotspot selected, apply an interaction of On Click > Hide > with the embedded video object as the target.
• With this hotspot still selected, open the SDK Panel again and add a close tag within the second Enter Tag field beneath the SDK ID. Press Enter/Return to finish adding your tag.
In the Enter Payload field beneath the second Enter Tag field, add the div id we used in Step 3. Our demo example's Payload is demovid.
• Open the Preview to test your experience. When you hide the video by clicking on the control hotspot you set up earlier, the video should pause playback.
Note: 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.
Step 7: Test Your Experience
In this guide:
• About This Plugin
• How We Did It
• How to Implement
1. Add the Custom HTML Script
2. Add Embedded Object & Modified YouTube Embed Code
3. Edit Embed Code
4. Replace "src" URL for YouTube Video
5. Add Tag & Payload to Embedded Object
6. Set Up Control Hotspot
• Within the embed code of your Embedded Object, replace the div id with a unique word to identify the video (eg. introvid, testimonial, etc) . In our demo example, the div id is demovid.
7. Test Your Experience
Play the YouTube video, then pause playback with the Pause button below (this will also hide the video). You can resume playback (and show the video again) with the Play button that generates after initially pausing the video.
Click here to copy modified YouTube Embed Code
Note: This is not the exact embed code that you'll get from YouTube. The code attached to the link above includes a div identifier, some controls to autoplay the video and hide related videos, and a enablejsapi=1 parameter to link up to the SDK.
We’ll go over these changes in the following steps.
Please note: Since the Hotspots created for this plugin may only trigger SDK commands, Click and/or Hover events are NOT sent to Ceros analytics, Google Analytics, or Google Tag Manager. To work around this, there would need to be a Click and/or Hover interaction added to the Hotspot. It can be anything, i.e., toggling visibility of a shape that exists off canvas.
Click here to view a recorded webinar that overviews this plugin!