ヘッダービデオがページ全体に広がります

ビデオヘッダーを作成しようとしています。大丈夫ですが、ヘッダーにないテキストを挿入しようとすると失敗します。私が置こうとしているテキストは、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>

出典

2017-06-18 Popentiu Vlad

.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>

出典

2017-06-18 10:34:12

ヘッダービデオがページ全体に広がります

答えて

関連する問題