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
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Find the Dawn theme and click on "Actions" > "Edit code."
Step 2: Locating the theme.liquid File
- In the left sidebar, under the "Layout" section, locate and click on "theme.liquid."
Step 3: Inserting the Fix Code
- Scroll down to the bottom of the theme.liquid file, just before the closing
</body>tag. - Copy the provided code snippet:
{% if template contains 'article' or 'page' or 'product' %}
<script>
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("youtube.com")) {
// 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
wrapperDiv.appendChild(iframeClone);
// Replace the original iframe with the wrapper div
iframe.parentNode.replaceChild(wrapperDiv, iframe);
}
});
}
});
</script>
<style>
.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;
}
</style>
{% endif %}
- Paste the code snippet into the theme.liquid file.
Step 4: Save Changes
- Click on the "Save" button to apply the changes to your theme.
Step 5: Testing
- Visit your Shopify store and navigate to a page containing embedded YouTube or other videos.
- 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.
