视频调整时，使用ipad而不是网页，以查看网站

Question

我正在制作一个响应式网站，其中我在第一页上有一个视频作为介绍。因为主容器的宽度设置为100%。当屏幕大小减小或增大时，视频会重新调整大小。问题是我想视频的高度重新调整大小。这就像视频覆盖了Ipad屏幕的整个视口，而剩下的网站可以向下滚动。我尝试使用jquery $(window).height();，但总是给出错误的高度，视频的高度不是根据视图端口。我们是否可以使用jquery或css3以更好更准确的方式检测设备(如iphone, ipad)的视口高度?

使用jQuery:

1. 计算并保存页面上所有视频的长宽比
2. 当窗口调整大小时，计算出内容区域的新宽度，并调整所有视频的大小以匹配该宽度

$(函数(){

// 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();

引用:流体宽度视频

看到演示