Jump to content

Sizing embed videos for desktop and mobile use

Recommended Posts

Hello, I'm having issues with video sizing for my website. I am using the embed block to add a YouTube video to my site but when I size it for the desktop and then go to the mobile version the video is much wider than the screen. Below is the embed code I;m using for the video block. One of the main reason I want to embed the video is so that I can control the "recommend" videos that YouTube suggest after the video has played.

<div><iframe width="1060" height="640" src="https://www.youtube.com/embed/D_tXgBEb-KE?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

How can I correct the sizing so it works both for desktop and mobile?

Screenshot 2023-06-12 at 10.49.52 AM.png

Screenshot 2023-06-12 at 10.49.56 AM.png

Link to comment
  • Replies 6
  • Views 810
  • Created
  • Last Reply

Top Posters In This Topic

Use this new code

@media screen and (max-width: 767px) {
    iframe[src*="youtube"] {
        width:100% !important;
        height: 300px;
    }
    .fe-647ff0c0377c007c12e4d656 {
    grid-template-rows: repeat(14,minmax(24px, auto)) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.