Help Resizing embed YouTube video with CSS

HTML-CSS
1

I’m working on the Tribute page, and I’ve added a YouTube video. I’ve Googled how to make the video responsive with CSS, but the solutions all make the video extend across the entire width when in full screen mode. The resizing to smaller screens looks great, but the video is just too big on full screen.

https://codepen.io/momi_kalonji/pen/VBPPOY?editors=1100

All help is greatly appreciated.
I’ve only learned HTML and CSS so other solutions wouldn’t help me just yet.

2

Try the following changes to your CSS. I used what you had before for making the iframe responsive, but since you want to limit the size of the iframe when the screen is wider (than 560px based on what you specified in the iframe element’s width attribute to maintain the 16x9 resolution), I applied the responsive part of the code to the applicable elements only when the screen is less than 560px wide. So the video stayed centered, I added text-align: center; to the iframe container element.

.video-responsive {
  text-align: center;
}

@media screen and (max-width: 560px) {
  .video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
  }
  .video-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
}
1 Like
3

Thank you very much. This did exactly what I needed. I struggled for so long, and all I needed to do was move the responsiveness into a media query. Thank you for your assistance, I appreciate it.

4

Hi @MomiKalonji …

I’m having this same issue and searched out help before making a new, duplicate post. I clicked on your project to see this piece of code in action, but it’s no longer live. The code changes that @camperextraordinaire explained are nothing like what I have, but I know that I’m using an outdated iframe code, only because it’s the only thing I can get to populate on the page.

Desktop looks great except the main photo is off center, but it’s perfect on mobile. Not sure why. Any thoughts?
Mobile looks great except the video is breaking out, but it’s perfect on desktop. Of course, I realize this is a responsive issue that I can’t seem to figure out.

I would greatly appreciate any help.

Thank you!
Tonia