@ercartman84

Как сделать ширину video больше ширины div'а родителя?

У меня есть div растянутый на всюд ширину и высоту экрана. В div'е html5 видео. Необходимо добиться чтобы видео полностью растягивалось либо по высоте либо по ширине, как cover для backgraund. Не получается Задать ширину видео больше ширины дива.
<div id="first_fon" class="wrap-container fon0" style="height: 594px;">
<video autoplay="" loop="" poster="http://everest911.smmstart.com.ua/wp-content/uploads/2015/06/video.jpg" id="bgvid" >
<source src="http://everest911.smmstart.com.ua/wp-content/uploads/2015/06/Keyboarding Side View-Mobile.mp4" type="video/webm">
<source src="http://everest911.smmstart.com.ua/wp-content/uploads/2015/06/Keyboarding Side View-SD.mp4" type="video/mp4">
</video>
</div>

.fon0 {
  width: 100%;
  position: relative;
  min-height: 366px;
}
video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background-size: cover;
}

Высота родительского div получается через JS.
При если высота выдео получается больше высоты родителя то видео по высоте как и надо вылазет за пределы div.
  • Вопрос задан
  • 769 просмотров
Пригласить эксперта
Ответы на вопрос 2
chlp
@chlp
фулстек
video { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  overflow: hidden;
}
Ответ написан
Комментировать
vserykh
@vserykh
Разработка сайтов, лендингов «под ключ»
Можно сделать отрицательные отступы:

margin-left: -100px;
margin-right: -100px;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы