Millerish
@Millerish

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

Добрый день!

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

Как решить мой вопрос?
  • Вопрос задан
  • 4642 просмотра
Решения вопроса 2
@AndreyMyagkov
<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>
Ответ написан
@Myateznik
Задача проста и как уже отметил Андрей решается css свойством:
video {
  object-fit: cover;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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