WP2X We can help your Wordpress faster 
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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.
Work nice! You save me a lot of time with your tips. It even work smooth on mobile web too. Great!
Not work here in chrome at least. Not sure what wrong. I sent you in contact page, please help me. Thanks