Do you have a problem with YouTube videos on your site that don’t resize in your responsive website? This can be a big hassle. You can set up your site using CSS to control the resizing, but, (1) You may have older websites that you don’t want to rewrite, (2) you may be somewhat unfamiliar with CSS or you have other reasons you don’t want to hassle correcting problems of resizing videos on your sites. If you are willing to take just a few minutes to fix the problem, there is a simple solution to your problem. To solve your problem, you’ll add a few lines of code to your file. In the
area of all pages that include videos, add the following lines of code:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="/js/videoSizing.js"></script>
Next, download the file “videoSizing.js. Add the file to the directory /js, and you’re done. This will make all your YouTube videos responsive. If you would prefer to place the videoSizing.js in an alternate directory, insert the file where you like, but, adjust the /js/videoSizing.js path to correctly reflect the directory that you chose to store the videoSizing.js file. Also, the addition of the jquery.min.js is only required for those sites that do not already use the jQuery library. As long as you use a src address that correctly accesses the file and the jQuery library library is included, all your YouTube videos will resize responsively.
By the way, if you would like to add a margin around the video, define the variable YOUTUBE_VIDEO_MARGIN and the video margin will be set. Ex.
YOUTUBE_VIDEO_MARGIN = 10 ; /* sets margin to 10 pixels */
If you are curious what is contained in the videoSizing.js file, you’ll find the following:
/*
* Youtube video auto-resizer script
* Created by Skipser.com
*/
jQuery(function($) {
if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
YOUTUBE_VIDEO_MARGIN=5;
}
$('iframe').each(function(index,item) {
if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
var w = $(item).attr('width');
var h = $(item).attr('height');
var ar = h/w*100;
ar = ar.toFixed(2);
//Style iframe
$(item).css('position','absolute');
$(item).css('top','0');
$(item).css('left','0');
$(item).css('width','100%');
$(item).css('height','100%');
$(item).css('max-width',w+'px');
$(item).css('max-height', h+'px');
$(item).wrap('<div style="max-width:' + w + 'px;margin:0 auto; padding:' + YOUTUBE_VIDEO_MARGIN + 'px;" /> ');
$(item).wrap('<div style="position: relative;padding-bottom: ' + ar + '%; height: 0; overflow: hidden;" /> ');
}
});
});
Enjoy the new responsiveness of your YouTube videos. By the way, if you would like more on this topic, see Skipser’s article on the jQuery snippet.
