Jump to content

Responsive YouTube Embedded Videos on both mobile and narrow desktop screens

Recommended Posts


I'm trying to make the embedded youtube videos on my website responsive to both mobile and narrow screens on laptops/desktops.

I am encountering the issue on my Video Editing page in the Video Essays section (https://www.danielzemke.com/work/video-editing) and my Voice Over page (https://www.danielzemke.com/work/voice-overs). The videos look great on a mobile device and a full screen browser, but once you start shrinking the browser, they begin to overlap.

Can you help me change the code of my embedded videos so that they're responsive to a changing browser size?


Below is an example of one of the embedded youtube codes. All of the embedded youtube videos have the same code with the exception of their individual source youtube videos.

<iframe width="690" height="390" src="https://www.youtube.com/embed/wBEAjjioZFI?controls=0&amp;start=1098&end=1285" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  @media screen and (max-width:767px) {
  iframe[src*="youtube"] {
    width: 100% !important;
    height: 200px;




Compressed browser 2.png

Compressed browser 1.png

Full size browser.jpg

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks later...

Hey Tuanphan,

When I change my browser screen from full screen to custom and drag its size up and down, that's when I'll see the videos overlapping one another. I figured if someone is looking at my website any less than fullscreen that it will appear that way. Any coding I can use to avoid that?



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.