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

将div惠特视频定位在boostrap 3上

2 个答案: