Позиционирование видео

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.