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

[Stephen567]

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:

<div align="center"> <iframe width="392" height="220.5" src="youtube url here" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>

Thank you so much.

[magecomp]

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

 

[Stephen567]

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.