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 2
html css video

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