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。看看下面的片段，希望你明白这个想法：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

同样在JSFiddle。

定位视频

1 个答案: