Разместите видео с надстройкой 3

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.Мне также пришлось добавить небольшой медиа-запрос Обновлена ​​ссылка на кодовый указатель

Изображение расположено абсолютно над видео

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