Video resize when using ipad instead of web to view website

I am making a responsive website in which i have a video on the first page as intro . Since the main container is set to 100% in width . the video re sizes when the screen size decreases or increases . The problem is i want the height of the video to re size too . And it would be like the video is covering the whole viewport of the Ipad screen and leaving the rest of the website to be scrolled down further . I tried using jquery $(window).height(); but is always gives the wrong height and the video's height is not according to the view port . Is there any way we can detect the height of the viewport of the devices such as iphone , ipad in a better and accurate way using jquery or css3 ?

Answers


Doing it with jQuery:

  1. Figure out and save the aspect ratio for all videos on the page.
  2. When the window is resized, figure out the new width of the content area and resize all videos to match that width with their original aspect ratio.

$(function() {

// 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
// (You'll probably want to debounce this)
$(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();

References: Fluid width vedio

See demo


Need Your Help

Amazon OpsWorks not mounting EBS volumes after instance reboot?

amazon-web-services aws-opsworks

I've configured an OpsWorks stack and my layer is set up so that a 50 GB volume will be attached to each instance I launch.

Multiple SyncAdapter with different Names in Android Account Manager

android android-syncadapter

I need to have multiple SyncAdapter. I now have exactly seven of them to synchronize differnt data between App and Server.