html обрезает высоту видео до высоты 100vh, видео до полноэкранного режима
Я борюсь с глупой маленькой вещью. Работа на этом сайте:
(извините за медленный сервер, школьные вещи, которые вы знаете)
Видео, которое вы увидите, находится на высоте vh100, что мне и нужно. Когда у меня есть это видео на максимальной высоте вашего браузера ширина видео не полноэкранный режим. Теперь у меня есть код:HTML
<!-- video -->
<video id="moodvideo" autoplay loop>
<source src="moodvideo.mp4" type='video/mp4'>
</video>
CSS
/* Video */
video {
height: 100vh;
width: 100vw;
}
Чего я пытаюсь добиться, так это видео на весь экран, width 100wh
и height 100vh
. Если height
(видео с шириной 100wh) больше, чем height 100vh
, я хочу, чтобы видео обрезалось так, чтобы оно было в полноэкранном режиме на max width
и height
вашем браузере. Обрезая, я не беспокоюсь о том, чтобы пропустить часть видео (50 пикселей снизу или около того), полноэкранный режим в width
и height
для меня важнее.
Итак, я уже много искал и перепробовал, прежде чем спросить вас, ребята, такие вещи, как; vw100/vh100
, min-height/width 100
, добавьте фильм в a div
, div
to 100 vh/vw
, и некоторые скрипты, которые я нашел, но на самом деле ничего не работает...
1 ответ:
Вы можете использовать плагин jQuery videoBG: http://syddev.com/jquery.videoBG/
Или вы можете добавить следующий код: https://jsfiddle.net/wcv2ak9p/1/
Альтернативное изображение отображается, когда браузер не поддерживает видео.
HTML
<video id="moodvideo" autoplay loop> <source src="moodvideo.mp4" type='video/mp4'> <img id="alternative" src="alternative.jpg" /> </video>
CSS
#moodvideo, #alternative { width: 100vw; /* Could also use width: 100%; */ height: 100vh; object-fit: cover; position: fixed; /* Change position to absolute if you don't want it to take up the whole page */ left: 0px; top: 0px; z-index: -1; }