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

Question

[ercartman84]

У меня есть 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.

Comments

[Сергей]

iconic.supra-test.ru посмотри тут

[ercartman84]

Сергей: Спасибо. object-fit: cover помог.

[ercartman84]

Сергей: К сожалению object-fit не поддерживается в IE. Ищу другие альтернативніе решения.

[Сергей]

ercartman84: а зачем у видео ширина больше чем у дива? Можно же див растянуть, как в моем примере

Answer 1

[Алексей Рытиков]

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

Answer 2

[Владимир Серых]

Можно сделать отрицательные отступы:

margin-left: -100px;
margin-right: -100px;