响应问题

Responsive issue

本文关键字：问题 响应      更新时间：2023-09-26

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

是这样的

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

网站

http://xypnise.com/test/

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>

有人能帮我吗?

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

如果你想看一个纯css的方式来做到这一点，看看这个技术。

只需在视频周围应用包装器<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%;
}

 $(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'  
   })
 })
相关文章：