jquery - Video resize when using ipad instead of web to view website -

i making responsive website in have video on first page intro . since main container set 100% in width . video re sizes when screen size decreases or increases . problem want height of video re size . , video covering whole viewport of ipad screen , leaving rest of website scrolled down further . tried using jquery $(window).height(); gives wrong height , video's height not according view port . there way can detect height of viewport of devices such iphone , ipad in better , accurate way using jquery or css3 ?

doing jquery:

1. figure out , save aspect ratio videos on page.
2. when window resized, figure out new width of content area , resize videos match width original aspect ratio.

$(function() {

// find youtube videos var $allvideos = $("iframe[src^='http://www.youtube.com']"),      // element fluid width     $fluidel = $("body");  // figure out , save aspect ratio each video $allvideos.each(function() {      $(this)         .data('aspectratio', this.height / this.width)          // , remove hard coded width/height         .removeattr('height')         .removeattr('width');  });  // when window resized // (you'll want debounce this) $(window).resize(function() {      var newwidth = $fluidel.width();      // resize videos according own aspect ratio     $allvideos.each(function() {          var $el = $(this);         $el             .width(newwidth)             .height(newwidth * $el.data('aspectratio'));      });  // kick off 1 resize fix videos on page load }).resize(); 

references: fluid width vedio

see demo