Question

我正在建立一个响应式网站，我在第一页上有一个视频作为介绍。由于主容器的宽度设置为100％。当屏幕尺寸减小或增大时，视频会重新调整大小。问题是我希望视频的高度也要重新调整大小。这就像视频覆盖了Ipad屏幕的整个视口，并使网站的其余部分进一步向下滚动。我尝试使用jquery $(window).height();，但总是给出错误的高度，视频的高度不符合视口。我们有什么方法可以使用jquery或css3以更好，更准确的方式检测设备视口的高度，例如iphone，ipad？

Answer 1

使用jQuery：

找出并保存页面上所有视频的宽高比。
调整窗口大小时，找出内容区域的新宽度并调整所有视频的大小以匹配该宽度原始宽高比。

$（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();

参考文献： Fluid width vedio

See demo

使用ipad而不是web查看网站时，视频会调整大小

1 个答案: