ポジショニング動画

Question

I効果的に、私はテレビの画像が画面上にビデオを表示しようとしています<img>

含ま<div>の上にビデオを移動するために、今日間しようとしてきました。

誰かが画面内の画像の中央になるようにビデオの位置を教えてくれますか？私はビデオを<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: absoluteを持っている必要がありますよりも、position: relativeを持っているコンテナを必要としています。あなたがアイデアを得る願って、スニペット怒鳴るを見てください：

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