Question

我有js响应插件的视频背景，但它不能正常工作，我的意思是之间有一个黑色空间

看看它是什么样的

https://www.dropbox.com/s/1xdyx7p5u7z67fz/Zrzut%20ekranu%202014-03-20%2023.00.25.png

网站

JS

    $(document).ready(function(){
        var video = $("#fs-video");
        var windowObj = $(window);

        function onResizeWindow() {
            resizeVideo(video[0]);
        }

        function onLoadMetaData(e) {
            resizeVideo(e.target);
        }

        function resizeVideo(videoObject) {

            var videoHeight = videoObject.videoHeight * percentWidth / 100;
            video.height(videoHeight);
        }

        video.on("loadedmetadata", onLoadMetaData);
        windowObj.resize(onResizeWindow);
    }
);

CSS

    #fs-video {
    width: 100%;
    position: fixed; 
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

HTML

  <div class="cover-video" style="width: 1905px; height: 923px;" >
<video id='fs-video' preload='metadata'  autoplay='true' loop="true" >
    <source src="http://www.xypnise.com/test/clouds_xypnise.mp4" type="video/mp4">
</video>

任何人都可以帮助我吗？

Answer 1

$(document).ready(function() {
    var aspectRatio = 404/720;
    aspectRatio = aspectRatio.toFixed(3);
    $('#content').css('height', $('body').width() *aspectRatio);
    $(window).resize(function() {
        $('#content').css('height', $('body').width()*aspectRatio);
    });
});

Answer 2

如果您想以纯css方式执行此操作，请查看this技术。

只需在视频周围应用包装<div class="videoWrapper/>，然后添加以下CSS：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 3

 $(document).ready(function(){
   var aspectRatio=404/720
   document.getElementById('content').style.height=(window.innerWidth*aspectRatio)+'px' 
   document.addEventListener('resize',function() {
     document.getElementById('content').style.height=(window.innerWidth*aspectRatio)+'px'  
   })
 })

回应问题

3 个答案: