html - 定位视频

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