定位視頻

Question

我有一直在嘗試了幾天現在在<div>其中包括<img>

有效，我試圖讓電視的圖像顯示在其屏幕上的視頻的頂部移動的視頻。

有人可以幫助我定位視頻，因此它是屏幕內部圖像的核心。我甚至無法將視頻定位在<img>之上，更不用說將其視爲正確的大小和居中。

在此先感謝。非常感激。

<div class="videocontainer"> 
<h1 class="videosheading"><strong>VIDEOS</strong></h1> 
<div class="videogallery"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <img class="img-responsive" src="img/TVWALLTWO.jpg"> 
     <video controls="" height="330" width="440"> 
     <source src="movie.mp4" type="video/mp4"> 
     <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. 
     </video> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"></div> 
    </div> 
    </div> 
</div> 

.videosheading { 
    color: #E3A750; 
    text-align: center; 
} 
.videogallery { 
    height: auto; 
} 
video { 
    background-color: red; 
    z-index:-1; 
    position:relative 
} 

Answer 1

要居中在響應圖像的視頻，你需要有position: relative一個容器，比視頻必須有position: absolute。看看片斷波紋管，希望你的想法：

.video-cell { 
 
    positon: relative; 
 
} 
 
.video-cell img { 
 
    width: 100%; 
 
} 
 
.video-cell video { 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 

 
    margin: auto; 
 
    max-width: 100%; 
 
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="videocontainer"> 
 
    <h1 class="videosheading"><strong>VIDEOS</strong></h1> 
 
    <div class="videogallery"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 video-cell"> 
 
       <img class="img-responsive" src="https://placehold.it/880x660"> 
 
       <video controls width="440" height="330"> 
 
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
        <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
        <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
        <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
       </video> 
 
      </div> 
 
     </div>

同樣在JSFiddle。