在引导程序 3 上放置带有视频的 div

Question

我正在尝试定位带有视频广告的 div，此视频必须覆盖图像，并且此图像位于 Bootstrap 3 容器内。 视频必须像图像一样响应并调整大小。 问题是我无法调整所有分辨率，我尝试将视频也放入引导程序并定位在图像上，但它无法正常工作。

Codepen：https://codepen.io/anon/pen/byGYqV

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="container">
    <video id='video' controls="controls" preload='none' poster="http://media.w3.org/2010/05/sintel/poster.png">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'>
    </video>
</div> <!-- End Normal Container -->

<div class="container-fluid">
    <div class="row main-player">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <img alt="" src="https://mitofago.com.mx/sites/default/files/styles/660x320/public/0029399560.jpg" class="img-slider img-responsive">
        </div>
    </div>
</div> <!-- End Boostrap Container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

谢谢！！

Answer 1

在你的视频标签中添加这个 CSS，你可以调整你在width和max-height中描述的值

video {
    width: 68rem;
    max-height: 50%;
    max-width: 100%;
}

更新代码笔：https://codepen.io/anon/pen/PvoEjm

Answer 2

我不得不重新构建一些 HTML 以使视频和图像具有响应性。 这是更新的 Codpen 链接。我还必须添加一个小型媒体查询 Updated codepen link

图像绝对位于视频上方

.img-container {
 position: absolute;
  top: 60px;
  left: 60px;
}