Question

该视频似乎完全可以全屏工作。唯一的问题是我无法看到我的标题。看来视频正在超越它们。当我向下滚动视频时，我只想看到标题。

有谁知道解决方案？

＆＃13;

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    body {
        padding: 0;
        margin: 0;
    }
    
    header {
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: transparent;
        z-index: 1;
    }
    
    video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

＆＃13;

<body>


    <header>




        <video poster="messi.jpg" autoplay="true" loop>
            <!-- <source src="ships.mp4" type="video/mp4"> -->
            <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
        </video>


    </header>

    <h1>test</h1>
    <h1>test</h1>
    <h1>test</h1>
    <h1>test</h1>




</body>

＆＃13;

Answer 1

您已将position:absolute用于标题和视频，height:100vh用于视频。那部分正在制造问题。将高度更改为100％并将位置：相对。

* {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    body {
        padding: 0;
        margin: 0;
      overflow-x:hidden;
    }
    
    header {
        position: relative;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: transparent;
        z-index: 1;
    }
    
    video {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

<body>


    <header>




        <video poster="messi.jpg" autoplay="true" loop>
            <!-- <source src="ships.mp4" type="video/mp4"> -->
            <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
        </video>


    </header>

    <h1>test</h1>
    <h1>test</h1>
    <h1>test</h1>
    <h1>test</h1>




</body>

全屏视频问题

1 个答案: