Html 5 video как делать видео на весь блок?

Question

[Millerish]

Добрый день!

Мне нужно сделать html 5 video на весь блок(что бы без черных отступов вверху/внизу или по бокам). 100% ширина и высота самого плеера не спасает, т.е. видео разных форматов, сам плеер тянется, но у видео черные полоски или с верху/внизу или по бокам.

Как решить мой вопрос?

Answer 1

[Андрей]

<div class="b-video">
	<video class="viedeo__file"preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/slide.png" id="video">
        <source src="http://site.ru/video/1.mp4" type="video/mp4" id="source-video">
    </video>
</div>


<style>
	.b-video {
	    width: 100%;
	    min-height: 600px;
	    height: 100vh;
	    position: relative;
	    overflow: hidden;
	    z-index: 1;
}
.viedeo__file{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

Comments

[Андрей]

весь секрет в object-fit: cover;

Answer 2

[Myateznik]

Задача проста и как уже отметил Андрей решается css свойством:

video {
  object-fit: cover;
}

Comments

[viktoriag373]

я тоже думала, что это хороший вариант, но столкнулась с тем что это хорошо отрабатывает в chrom но при этом странно работает в fire fox. оно растягивается, но при этом его плющит, вместо того чтобы обрезать лишнее. как будто и режет и плющит