ビデオの背景にpng imgを設定するには？

Question

私は自分の背景ビデオの上にpngを配置したいが、pngはその背景にある。

私はz-indexを使ってみましたが、ビデオが消えてしまいました（相対的な位置から相対的な位置への位置を変えたとき）。ここに私のHMTLとCSSのコードは次のとおりです。

<div id="page2"> 
    <video autoplay loop muted id="video"> 
     <source src="Images/KeyboardVideo.mp4"> 
     <source src="Images/KeyboardVideo.webm"> 
    </video> 

    <div id="servicelogo"><img src="images/htmlcssjs.png"></div> 
</div> 




/* CSS Document */ 

* {margin: 0; padding: 0;} 

     body{ 
      font-family: arial,helvetica; 
      color: black; 
      text-align: center; 
     } 

     h1{ 
      font-size: 6em; 
      padding-top: 305px; 
      opacity: 0.8; 
     } 

     p{ 
      font-size: 2em; 
     } 


#wrapper { 
    position: fixed; 
    height: 80px; 
    width: 100%; 
    background-color: black; 
    z-index: 500; 
} 

#nav { 
    height: 80px; 
    width: auto; 
    float: right; 
    list-style: none; 
    position: relative; 
    margin-right: 100px; 
    z-index: 500; 
} 

#nav li { 
    height: 80px; 
    width: 100px; 
    float: left; 
    font-family: sans-serif; 
    font-weight: bold; 
    color: white; 
    padding: 0px 15px 0px 15px; 
    text-align: center; 
    line-height: 80px; 
    font-size: 20px; 
} 

#video { 
position: relative; 
width: auto; 
min-width: 100%; 
height: auto; 
background: transparent url(images/Nature2.jpg) no-repeat; 
background-size: cover; 
z-index: -1 
} 

#servicelogo img{ 
    position: relative; 
    height: 40%; 
    width: 40%; 
    margin-top: 8%; 
    opacity: 0.8; 
} 

#page2 { 
    width: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    top: 0; 
    right: 0;  
} 

a {text-decoration: none;} 

/* unvisited link */ 
a:link { 
    color: white; 
} 

/* selected link */ 
a:active { 
    color: #7f8c8d; 
} 

/* visited link */ 
a:visited { 
    color: white; 
} 

/* mouse over link */ 
a:hover { 
    color: #7f8c8d; 
} 


#page1 {background-image: url(images/Nature1.jpg); z-index: -1;} 
#page3 {background-image: url(images/Nature2.jpg);} 
#page4 {background-color: #2ecc71;} 

Answer 1

あなたはこのsnipetに従うことができます：

.videoitem { 
 
    position: relative; 
 
    overflow: hidden; 
 
    
 
    width: 560px; 
 
    height: 315px; 
 
} 
 

 
.videoitem-cover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    /*** opacity: 0; ***/ 
 
    background: yellow; 
 
    transition: 250ms opacity ease-out; 
 
    line-height: 315px; 
 
    text-align: center; 
 
    -webkit-pointer-events: none; 
 
    pointer-events: none; 
 
} 
 

 
.videoitem:hover .videoitem-cover { 
 
    opacity: 1; 
 
}

<div class="videoitem"> 
 
    <div class="videoitem-embedd"><iframe width="560" height="315" src="https://www.youtube.com/embed/zdkWGsnzTXk" frameborder="0" allowfullscreen></iframe></div> 
 
    <div class="videoitem-cover">Hovering</div> 
 
</div>

Answer 2

私はそれを解決しました！代わりにビデオに

#video { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#servicelogo img{ 
 
\t position: relative; 
 
\t height: 40%; 
 
\t width: 40%; 
 
\t margin-top: 8%; 
 
\t opacity: 0.8; 
 
} 
 

 
#page2 { 
 
    width: 100%; 
 
    max-height: 100%; 
 
    overflow: hidden; 
 
    top: 0; 
 
    right: 0;  
 
}