All Fuzzy

Resize YouTube video fit into browser like Leanback using jQuery

Youtube Leanback gives a pretty awesome native app feel. I was wondering how their video is automatically resized to fit the browser. I tried to use Chrome inspector to checkout how Leanback video is resized, but the code is minified to obscurity that you can’t read it. I also checked out fitvidsjs and Chris Coyier’s solution to similar problem. But these two suggestions work only for fitting the video horizontally in the browser. It doesn’t take care of vertical fitting like leanback videos.

Here’s my solution using conventional jquery codes.

$(document).ready(function(){
  var $aspect_ratio = $(".video iframe").height() / $(".video iframe").width() ,
      $fluid_container = $("body"),
      $video = $(".video iframe");
  $video.removeAttr('height');
  $video.removeAttr('width');

  $(window).resize(function() {
    window_width = $fluid_container.width();
    window_height = $fluid_container.height();
    ideal_video_height = window_width / $aspect_ratio;
    ideal_video_width = window_height / $aspect_ratio;
    if (ideal_video_height > window_height) {
      $video.height(window_height);
      $video.width(window_height / $aspect_ratio);
      $video.css("padding", "0px " + (window_width-ideal_video_width)/2 +"px");
    }
    if (ideal_video_width > window_width) {
      $video.width(window_width);
      $video.height(window_width * $aspect_ratio);
      $video.css("padding", (window_height-window_width*$aspect_ratio)/2+"px 0px");
    }
  }).resize();
});

The solution above resizes the video both horizontally and vertically.