Here’s a small jQuery code snippet that I found on Anders Noréen‘s themes that makes sure embeded videos have the correct size ratio on any screen.
(function() { // resize videos after container var vidSelector = "iframe, object, video"; var resizeVideo = function(sSel) { $( sSel ).each(function() { var $video = $(this), $container = $video.parent(), iTargetWidth = $container.width(); if ( !$video.attr("data-origwidth") ) { $video.attr("data-origwidth", $video.attr("width")); $video.attr("data-origheight", $video.attr("height")); } var ratio = iTargetWidth / $video.attr("data-origwidth"); $video.css("width", iTargetWidth + "px"); $video.css("height", ( $video.attr("data-origheight") * ratio ) + "px"); }); }; resizeVideo(vidSelector); $(window).resize(function() { resizeVideo(vidSelector); }); })();
Leave a Reply