In this guide:
About This Plugin
On a non-Ceros web page, an iframe 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
Click here to view a recorded webinar that overviews this plugin!
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
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.
<script id="youtube-plugin" src="https://creative-services.ceros.com/customer-success/youtube-pause/v2/main.js"></script>
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.
<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>
Note: This is not the exact embed code that you'll 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.
Step 3: Edit Embed Code
• 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.
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.
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 the visibility of a shape that exists off the canvas.
Step 7: Test Your Experience
• 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 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.