Question

我正在尝试制作视频标题。没关系，但是当我尝试放置一些不在标题中的文本时，它会失败。我试图放下的文字是h1：hello中的文字，但看起来它出现在页面的左上角。此外，当我在手机上访问该页面时，视频会放大。

CSS： `

.full-width-video-bg {
    padding: 100px 0;
    color: #fff;
}

.bgvid {
 background: white;
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    background-size: cover;
}
.text{
    z-index: 1;

    color:white;
    font-family: "Verdana"; 
}
.text h1{
    font-size: 34px;
}
.text p{
    font-size: 20px;
    text-align: center;
}

`

HTML：`

<body>

    <header id="container">

        <div class="w3-display-middle">
        <h1 class="text">My name is Vlad.</h1>
            <p class="text" style="text-align:center;">And this is an example.</p>
        </div>

        <video autoplay loop id="bgvid">

<source src="vid/Tulips_are_Here.mp4" type="video/mp4">

</video>
    </header>
<h1>hello</h1>
</body>

`

Answer 1

.full-width-video-bg {
    padding: 100px 0;
    color: #fff;
}

.bgvid {
 background: white;
}

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    background-size: cover;
}
.text{
    z-index: 1;
    color:white;
    font-family: "Verdana"; 
    margin: -30px;
}
h1{
 color:white;
 text-align: center;
}

<body>

<h1> hello </h1>


        
<h1 class="text">My name is Vlad.</h1>
<header id="container">
<video width="100%" height="240" controls autoplay loop id="bgvid">
<source src="https://dl.pagal.link/upload_file/367/Hollywood%20Trailers%20in%20Hindi%20HD/SpiderMan%20-%20Homecoming%20%282017%29%20Trailer%20Hindi/Spider-Man-%20Homecoming%20-%20Hindi%20Trailer%202%20%28HD%20Android%29.mp4" type="video/mp4">

  Your browser does not support the video tag.
</video>
 </header>

</body>

标题视频只是扩展整个页面

1 个答案: