Full width 100% for youtube video iframe

Today I will share you the issue what take me entire of day to solve about Full width 100% for youtube video iframe. Hope it will save your time. If you meet this issue, I believe it just take you 5 minutes to finish the task.

There are 2 ways to solve this issue

1. Javascript to make Full width 100% iframe/embed

Simple add this jQuery code

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://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();

Now, reload the page and see the magic.

2. CSS to make Full width 100% iframe/embed

Much more simple, you can apply this css tips and the result will be the same.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper object,
.videoWrapper embed,  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Remember add class videoWrapper out of your video then the video inside this class will be display 100%.

Now, enjoy the result and welcome any comment.