How can I make the YouTube player scale to the width of the page but also keep the aspect ratio?

Question

I have a YouTube video I want to put on my web page.

I want to scale the video to fit to a percent of the users browser but also to keep the aspect ratio.

I hav

Answer 1

Old question, but I think the @media CSS 3 tags would be helpful in this instance.

Here is my solution to a similar problem.

The CSS:

@media only screen and (min-width: 769px) {
    .yVid {
        width: 640px;
        height: 360px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .yVid {
        width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

The HTML:

<div class="yVid">
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

This basically adds a breakpoint at 768px where the video resizes itself. You could also add breakpoints at 992 and 1280 for an even more repsonsive video size. (numbers based on Bootstrap standard sizes).

Answer 2

Quite easy with some javascript.

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});

Answer 3

These work a treat no JS. Responsive single palyer and list player modified from somewhere not sure, no credit sorry. Load your iframe Youtube player inside the div, the style=" " sets the player size, src= your-youtube-ID, add own player options jsfiddle.net/e2d50fym/3/

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<iframe 
style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
src="https://www.youtube-nocookie.com/embed/0eKVizvYSUQ" 
allowfullscreen scrolling="no" 
allow="encrypted-media; accelerometer; 
gyroscope; picture-in-picture">
</iframe>

</div>

Responsive Youtube List player. nocookie(privacy mode), list= your playlistID, change :- autoplay =0, loop=1 jsfiddle.net/e2d50fym/4/

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
<!--- load iframe Youtube player inside this div -->
<iframe 
style="border: 1; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
src="https://www.youtube-nocookie.com/embed/?
list=PL590L5WQmH8fmto8QIHxA9oU7PLVa3ntk;
&autoplay=0&enablejsapi=1&index=0&
listType=playlist&loop=1&modestbranding=1" 
allowfullscreen scrolling="no" 
allow="encrypted-media; accelerometer; 
gyroscope; picture-in-picture">
</iframe>

</div>

Answer 4

You could use two classes that would scale the size of the video based on the size of the wrapping div. Consider this example:

<div class="content-wrapper">
    <div class="iframe-wrapper res-16by9">   
        <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Now look at the css.

.content-wrapper{
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.iframe-wrapper{
  width: 100%;
  position: relative;
}

.res-4by3{
  padding-bottom: 75%;
}

.res-16by9{
  padding-bottom: 56.25%;
}

.iframe-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Note that you will have to wrap the iframe in a div who's width is set to 100% and position is set to relative. You have to also add a bottom-padding to iframe wrapper. This padding will define the height of a video. I recommend to create two classes that will represent the image ratio.

It is quite easy to calculate the right bottom-padding for wrappers that represent certain resolution. For example for res 4 by 3 and 16 by 9 would have bottom-padding equal to:

[4/3 res]

100 / 4 * 3 = 75%;

[16/9 res]

100 / 16 * 9 = 56.25%

Then position the iframe as absolute and push it to the top left corner of the wraping div. Also meke sure to set iframe width and height to 100%. Now you have to do one more thing. You are done.

Add the class that fits the right resolution for you. It will scale the image width and height respectively keeping the right proportions in place.

The example above works for any iframe. Thats mean you can also use it for google maps iframe.

Answer 5

This jQuery plugin has been making the rounds of late, it's called FitVids and does exactly what you need, resizes videos based on browser size whilst maintaining aspect ratio.

http://fitvidsjs.com/

Answer 6

Add JavaScript code to give each youtube iFrame a class:

$('iframe[src*="youtube"]').addClass('youtube')

Then in the Media Queries use the you tube class to set a different size.

.youtube {
   /* Do stuff here */
}

Easier and optimized to CMS than the manual way.