My recommended CSS solution for auto-resizable iframes.

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

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

<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

Check out the live demo here.

Revolutionizing Web Design (2022) - aspect-ratio

Introducing the groundbreaking aspect-ratio property in CSS, simplifying the process of scaling a YouTube video without the need for complex CSS workarounds or JavaScript.

Check out this example:

iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

The widespread browser support for the aspect-ratio property makes it a versatile solution for the majority of websites: https://caniuse.com/mdn-css_properties_aspect-ratio

It can be achieved quite effortlessly with a touch of javascript.

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

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

I recently came across this incredible plugin known as FitVids. This amazing tool resizes videos to fit the browser size perfectly without distorting the aspect ratio.

Here is a neat solution that works without JavaScript. It is responsive for both single players and list players, adapted from an unknown source (no credit given, sorry). Simply load your iframe YouTube player inside a container div, where the iframe style determines the player's specific sizing. By setting the width and height to 100%, the player will fill the container at any size. Don't forget to add your YouTube ID in the src attribute and customize your player options. Check out the code here

    <div style=" 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>

If you want to ensure that a YouTube video resizes automatically, the key is to set the iframe width to 100% and place it within a div with a "padding-bottom" that matches the aspect ratio in percentage. For example:

However, the issue arises when you already have multiple pages with embedded YouTube videos. Fortunately, there is a jQuery plugin available that can scan all videos on the page and automatically make them resizable by adjusting the iframe code accordingly. This means you won't have to modify any existing code. By including the JavaScript plugin, all your YouTube videos will start autoresizing effortlessly.

Although this question may be old, using the @media CSS 3 tags could prove to be beneficial in addressing this issue.

Allow me to provide my solution to a similar dilemma.

Here is the CSS code:

@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;
    }
}

Now, onto the HTML:

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

This implementation creates a breakpoint at 768px where the video adjusts its size accordingly. Additionally, breakpoints at 992 and 1280 can be incorporated for an even more responsive video size (based on Bootstrap standard dimensions).

Here's a solution that has proven effective for me. I made some tweaks to the code I found on the YouTube Embed Code Generator.

The CSS:

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    }
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

The HTML:

<div class="video-container">
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>

To achieve a maximum width and maximum height of 87%, you can apply the following inline style:

style="max-width: %87; max-height: %87;"

Aside from Darwin and Todd, there is another solution that addresses the following:

1. Avoiding the bottom margin
2. Maximizing the width for large screens
3. Minimizing the height in mobile view
4. Keeping a fixed size for browsers not compatible with @media

Here is the HTML:

<div class="video_player">
  <div class="auto-resizable-iframe">
    <div>
      <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
    </div>
  </div>
</div>

And here is the CSS:

.videoplayer{

    text-align: center;
    vertical-align: middle;

    background-color:#000000;

    margin: 0;
    padding: 0;

    width: 100%;
    height:420px;

    overflow:hidden;

    top: 0;
    bottom: 0;

}

.auto-resizable-iframe {
    width:100%;
    max-width:100%;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom:420px;
    height: 0px;
}

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


//full screen
@media (min-width:0px) {

    .videoplayer{
        height:100%;
    }

    .auto-resizable-iframe > div {
        padding-bottom:100%;
    }           

}

//mobile/pad view
@media (min-width:600px) {

    .videoplayer{
        height:420px;
    }

    .auto-resizable-iframe > div {
        padding-bottom:420px;
    }       

}       

When considering suggestions to use JavaScript to modify the structure of a generated iframe, it's important to be cautious. Wrapping the iframe inside other elements can potentially cause the YouTube API to lose its connection with the iframe, especially if passing the element as a node rather than using a specific ID. One way to work around this issue is to use JavaScript to modify the content before triggering the YouTube player.

Here's a snippet from my code:

/**
 * Given the player container, we will generate a new structure like this
 *
 * <div class="this-is-the-container">
 *      <div class="video-player">
 *          <div class="auto-resizable-iframe">
 *              <div>
 *                  <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *
 * @return {Node} the real player node deep inside
 */
YouTube.renderResizable = function (playerContainer) {
    // clean up the content of player container
    playerContainer.textContent = '';

    var playerDiv = document.createElement('div');
    playerDiv.setAttribute('class', 'video-player');

    playerContainer.appendChild(playerDiv);

    // add the auto-resizable-frame-div
    var resizableDiv = document.createElement('div');
    resizableDiv.setAttribute('class', 'auto-resizable-iframe');

    playerDiv.appendChild(resizableDiv);

    // create the empty div
    var div = document.createElement('div');
    resizableDiv.appendChild(div);

    // create the real player
    var player = document.createElement('div');
    div.appendChild(player);

    return player;
};

To adjust the dimensions of the iframe, you can utilize the CSS unit vw, which is based on the device's width:

.videoWrapper iframe {
    height: 36.6vw;
    width: 65vw; 
}

If you want to dynamically scale the size of a video based on the size of its wrapping div, you can utilize two classes. Take a look at this sample code:

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

Now, let's delve into the CSS styling:

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

.video-holder{
  width: 100%;
  position: relative;
}

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

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

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

Remember to enclose the iframe within a div with 100% width and relative position, and apply bottom padding to the wrapper to determine the video height. It's suggested to create classes for different aspect ratios.

You can easily calculate the padding percentage for specific aspect ratios. For instance, for 4:3 and 16:9 ratios:

[4:3 aspect]

100 / 4 * 3 = 75%;

[16:9 aspect]

100 / 16 * 9 = 56.25%

Position the iframe absolutely in the top left corner of the wrapping div, setting its width and height to 100%. This approach ensures proper scaling while maintaining aspect ratio.

Simply apply the appropriate class for the desired aspect ratio. This technique is versatile and can be used with various iframes, including Google Maps embeds.