Embedded YT video on Shopify store with Dawn theme is too wide on mobile

Store Design

Topic summary

A Shopify store owner using the Dawn theme is experiencing an issue where an embedded YouTube video extends beyond the mobile screen width, despite adjusting dimensions in a custom liquid section.

Current Implementation:

  • Using custom liquid with an iframe set to specific pixel dimensions (392x220.5)
  • Video displays too wide on mobile devices regardless of size adjustments

Proposed Solution:
Add responsive CSS styling to make the iframe width 100% with auto height to maintain aspect ratio. The CSS should target YouTube iframes specifically using iframe[src*="youtube.com"].

Alternative Options:

  • Check Shopify admin for built-in video embed features
  • Explore Shopify App Store for apps that handle responsive video embedding

Current Status:
The original poster has limited coding experience and requested specific step-by-step guidance on where to add the CSS code and how to integrate it with their existing custom liquid code. The issue remains unresolved pending clearer implementation instructions.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I have tried changing the sizes to for example 514*91.79 to avoid the YT brand on it, but still the video is wider than the mobile screen. How can I fix this please? I’m not experienced with coding, but this is what I’ve used in the custom liquid section:

Thank you so much.

2

Hello @Stephen567

While you mentioned not being experienced with coding, this might be the most effective solution. You can add CSS styles to your iframe to control its behaviour on mobile devices.

Here’s a basic example:

/* Add this to your Shopify theme's CSS file */
iframe[src*="youtube.com"] {
    width: 100%; /* Make the iframe full width on mobile */
    height: auto; /* Maintain aspect ratio */
}

This code will make the YouTube iframe occupy the full width of the mobile screen and adjust its height accordingly to maintain the video’s aspect ratio.
OR

Shopify might offer built-in video embed features or apps that handle responsive video embedding more effectively. Check your Shopify admin for options related to video embeds.
OR
Explore Shopify App Store

3

Thank you. I have no idea with code and CSS (whatever it really is) to be honest. Can you please be specific with what I need to do. I’m not sure if when you say CSS you mean I add this text to the existing text in the custom liquid box. Maybe you can copy the code I shared and integrate your suggestion so I paste the whole thing to ensure it’s in the right place? Appreciate the help, thank you.