Skip to main content
LIZZIE
LIZZIE
Inspiring
April 27, 2019
Answered

Setting embedded youtube videos to fill the screen on any resolution with media queries?

  • April 27, 2019
  • 1 reply
  • 13003 views

I would like to thank everyone for their continued help with this code. I think this is probably the last problem that I have been running into with the website. Thank you for all of your help.

I'm trying to make an embedded YouTube video stretch to fill all available width (and not stretch the page out) of a page on any resolution. Just like the adaptive pictures on my website. I already know how to use media queries, and the goal is to set the video to become completely adaptive on resolutions lower than 1000px. I'm using this for most of the elements on my website and I have been trying to use the same code for my video, but it's not working for some reason.

This is my page.

The video is toward the bottom of the page. Right now on small screens the video stretches completely out of the screen. I also don't have any styles applied anywhere for the video's div class, but I did try using the width:100% attribute, but to no avail.

this is the code for the embedded video...

<div class="videos">

<iframe width="1920" height="1080" src="https://www.youtube.com/embed/zIP2iVV6vOU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 
</div>

I am aware that it is set to 1920, 1080, but I thought (like with the pictures on my website) I could style it differently with a media query?

Is there anything I could do to achieve the intended results?

Thank you again. I really appreciate all of this.

Message was edited by: Mod. (Link Removed)

This topic has been closed for replies.
Correct answer Nancy OShea

Nancy would probably disagree with you. I mean, bootstrap seems to be pretty decent to me. It's just that it's too late for me with a 5000+ page website.

I've been googling it since last night, but the things that I've tried aren't working right now. I only make these topics after hours of looking it up myself and trying things based on my own knowledge of html/css/java script.

I can wait a little longer if you can't post it, though. My website isn't going anywhere.


Responsive YouTube.  No Bootstrtap.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive YouTube video</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 80%; 
margin:0 auto;
}
.responsive-video{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.responsive-video iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="responsive-video">
<iframe width="1920" height="1080" src="https://www.youtube.com/embed/zIP2iVV6vOU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</body>
</html>








1 reply

B i r n o u
B i r n o u
Legend
April 27, 2019

you're welcome.

I don't understand your objective. Currently, the video is adaptive to the width of the content which is actually adapted to the width of the page.

from the minimum width to 5000+ pixels wide the video adapts its own width.

so what do you want to do?

    LIZZIE
    LIZZIEAuthor
    Inspiring
    April 27, 2019

    The pictures on my website are responsive. They change with the size of the page on mobile devices, so that you can actually see the complete image. When I pull this website with the video up on my mobile device or in a shrunken window of any web browser the video stays fixed at one size instead of changing (just like the pictures on my site) with the size of the screen.

    Basically, before hitting play and full screen on the video, the tumbnail to the video is so large it cuts off on mobile devices. I don't want that. I want to scale responsively with the page.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    April 27, 2019

    Nancy would probably disagree with you. I mean, bootstrap seems to be pretty decent to me. It's just that it's too late for me with a 5000+ page website.

    I've been googling it since last night, but the things that I've tried aren't working right now. I only make these topics after hours of looking it up myself and trying things based on my own knowledge of html/css/java script.

    I can wait a little longer if you can't post it, though. My website isn't going anywhere.


    Responsive YouTube.  No Bootstrtap.


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Responsive YouTube video</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .container {
    width: 80%; 
    margin:0 auto;
    }
    .responsive-video{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
    }
    .responsive-video iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="responsive-video">
    <iframe width="1920" height="1080" src="https://www.youtube.com/embed/zIP2iVV6vOU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
    </div>
    </div>
    </body>
    </html>








    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices