Stop YouTube embeds slowing your Shopify homepage: a click-to-load video section

YouTube iframe embeds on a Shopify homepage can significantly slow down page load times, as the player is downloaded before the viewer decides to watch any content. This issue is particularly prevalent on the homepage where the heavy player download often goes unnoticed by most users. To address this, a simple solution involves displaying a cover image and a play button, loading the actual iframe only when the user clicks on the button.

Shopify's Dawn theme already implements this approach using a Video section that wraps the iframe in a section inside a deferred-media element. If you are using this theme or a custom section built from it, you are likely fine. However, in cases where a raw iframe is pasted into a custom Liquid section or an older theme with its own video section, the following steps can be taken.

To implement the click-to-load video section, create a new section named `sections/video-on-click.liquid`. Within this section, assign the YouTube video URL and title from the section settings. Use conditional logic to check if a video URL is present and, if so, create a button with the specified label and attach the necessary data attributes.

Apply CSS styles to the section, positioning the video area relative to the parent container and setting the aspect ratio to 16:9. Create a poster image using the cover image provided by the merchant or a default YouTube thumbnail if no cover image is available. Add a play button using the `video-on-click__play` class, positioning it absolutely within the poster image.

Include JavaScript code to listen for click events on the poster image. When the button is clicked, create an iframe element, set its source based on the video type (YouTube or Vimeo), and replace the button with the iframe element. This ensures that the iframe only loads after the user interacts with the section.

Finally, define the section settings and presets in the schema block. The `video_url` setting parses the YouTube or Vimeo link, providing the necessary video ID and type information. Include fields for the video URL, cover image, and button label, along with default values for convenience.

By following these steps, you can effectively implement a click-to-load video section on your Shopify homepage, improving load times and providing a better user experience for your visitors.