.container {
height: 100vh;
min-height: 600px;
}
@media screen and (min-width: 600px) and (orientation: landscape) {
.container {
min-height: 800px;
}
}@media screen and (min-height: 1200px) and (orientation: landscape) {
/* Стили CSS ... */
}@media screen and (max-height: 700px) {
/* Стили CSS ... */
}.container
box-sizing border-box.container {
box-sizing: border-box;
}.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}<video class="video" poster="poster.jpg" preload>
<source src="video.mp4">
</video>document.addEventListener("DOMContentLoaded", function(){ // аля $(document).ready
let videos = document.getElementsByClassName('video'); // получаем все видосы с класосм
videos = [].slice.call(videos); // преобразуем в массив
videos.forEach(function(item) { // перебираем массив и навешиваем обработчики
let media = item;
media.onclick = function () {
media.play(); // запускаем проигрывание
media.controls = true; // добавляем контролы
};
media.addEventListener('ended', function() {
media.controls = false; // видео просмотрено, убираем контролы
});
});
});