Rectangle 27 0

Shrink a YouTube video to responsive width?


// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Kick off one resize to fix all videos on page load
  }).resize();
});
<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
width="16" height="9"
  • Gets reference width from video iframe parent instead of predefined element
  • Relies on width and height of iframe to preserve aspect ratio
  • Uses jQuery substring *= selector instead of start of string ^=

I have tried many solutions. This is the best solution on the Internet to make YouTube Videos responsive.

Note that this solution will bind the resize event with a JavaScript function, which may put stress on the browser as more events are added. Remember that you can use JavaScript to wrap the iframe in a wrapper div to let the CSS handle the responsive styling and boost performance.

Refined Javascript only solution for YouTube and Vimeo using jQuery.

Simple to use with only embed:

This helps. Especially in cases where you have no control over the HTML elements (but JS) and cannot set a videowrap. Thank you.

Note
Rectangle 27 0

Shrink a YouTube video to responsive width?


<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

If you are using Bootstrap you can also use a responsive embed. This will fully automate making the video(s) responsive.

it is worth adding that you should insert those inside some col-sm... etc. to avoid making the video full width.

Note
Rectangle 27 0

Shrink a YouTube video to responsive width?


.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

I used the CSS in the accepted answer here for my responsive YouTube videos - worked great right up until YouTube updated their system around the start of August 2015. The videos on YouTube are the same dimensions but for whatever reason the CSS in the accepted answer now letterboxes all our videos. Black bands across top and bottom.

I've tickered around with the sizes and settled on getting rid of the top padding and changing the bottom padding to 56.45%. Seems to look good.

Just an update on this - sometimes the old placeholder images used on the videos make it look like there are still black bands top and bottom but the videos themselves look good with this new setting when you actually start playing them. Grrr, thanks YouTube.

Thanks @McNab, can confirm working August 2015

Thanks. Using padding-bottom: 50% gets rid of the top and bottom black bars for the video I am using, although it seems that the thumbnail and the video itself have mismatched aspect ratios...

Note
Rectangle 27 0

Shrink a YouTube video to responsive width?


.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

@magi182's solution is solid, but it lacks the ability to set a maximum width. I think a maximum width of 640px is necessary because otherwhise the youtube thumbnail looks pixelated.

I also set the padding-bottom in the inner wrapper to 50 %, because with @magi182's 56 %, a black bar on top and bottom appeared.

My solution with two wrappers works like a charm for me:

This worked better for me trying to embed a responsive video, but specify a width (the max-width).

Note
Rectangle 27 0

Shrink a YouTube video to responsive width?


.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The .videowrapper div should be inside a responsive element. The padding on the .videowrapper is necessary to keep the video from collapsing. You may have to tweak the numbers depending upon your layout.

You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of "videowrapper" and apply the following styles:

in my case the video does not appear when applying this CSS.

the detail explanation on the number 56.25% and 25px can be read at alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25%: To create a 16:9 ratio, we must divide 9 by 16 (0.5625 or 56.25%). padding-top: 25px: To avoid issues with the broken box model (IE5 or IE6 in quirks mode), we use padding-top rather than height to create room for the chrome.

Note
Rectangle 27 0

Shrink a YouTube video to responsive width?


// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS

The problem with previous solution is that you need to have special div around video code, which is not suitable for most uses. So here is JavaScript solution without special div.

Note