How to Fix Shopify Dawn Theme YouTube & iFrame Video Responsiveness Issue

How to Fix Shopify Dawn Theme YouTube & iFrame Video Responsiveness Issue
Disclaimer: We may earn a commission at no extra cost to you. Commissions do not affect our opinions or evaluations.

Shopify's Dawn theme offers a sleek and modern design for online stores, but like any theme, it can encounter issues with video responsiveness, particularly when embedding YouTube or other videos. In this guide, we'll walk through a step-by-step solution to fix this problem using a combination of JavaScript and CSS.

Enjoy 3 months of Shopify for $1/month

Trusted by over 2,000,000 businesses worldwide

Step 1: Accessing the Theme Code

  1. Log in to your Shopify admin panel.
  2. Navigate to Online Store > Themes.
  3. Find the Dawn theme and click on "Actions" > "Edit code."

Step 2: Locating the theme.liquid File

  1. In the left sidebar, under the "Layout" section, locate and click on "theme.liquid."

Step 3: Inserting the Fix Code

  1. Scroll down to the bottom of the theme.liquid file, just before the closing </body> tag.
  2. Copy the provided code snippet:

{% if template contains 'article' or 'page' or 'product' %}
        document.addEventListener("DOMContentLoaded", function () {
        // Find all iframe elements on the page
        var iframes = document.querySelectorAll('iframe');
        // Check if there are any iframe elements
        if (iframes.length > 0) {
            // Loop through each iframe
            iframes.forEach(function (iframe) {
                // Check if the iframe has a YouTube video source
                if (iframe.src && iframe.src.includes("")) {
                    // Create a new div element with the class "video-wrapper" for each YouTube video iframe
                    var wrapperDiv = document.createElement('div');
                    wrapperDiv.className = 'video-wrapper';
                    // Clone the iframe to avoid removing it from its original position
                    var iframeClone = iframe.cloneNode(true);
                    // Append the cloned iframe to the wrapper div
                    // Replace the original iframe with the wrapper div
                    iframe.parentNode.replaceChild(wrapperDiv, iframe);
      .video-wrapper {
  position: relative;
  padding-bottom: 56.33%;
.video-wrapper iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
   {% endif %}
  1. Paste the code snippet into the theme.liquid file.

Step 4: Save Changes

  1. Click on the "Save" button to apply the changes to your theme.

Step 5: Testing

  1. Visit your Shopify store and navigate to a page containing embedded YouTube or other videos.
  2. Verify that the videos now resize properly and maintain responsiveness across different screen sizes.

Video Guideline:

By following these steps and implementing the provided code snippet into your Shopify Dawn theme's theme.liquid file, you can effectively resolve the issue of YouTube and iFrame video responsiveness. This ensures a better viewing experience for visitors to your online store, improving usability and engagement.

Back to blog