How to properly implement a fullscreen video intro?

Question

css

I'm drawing a layout on a 970px bootstrap grid
Naturally, the site is planned to be made adaptive
. The first block on it is a video intro
Question 1: when drawing the layout, what height should I set for the block with a video background, taking into account the browser-based top panel?
question 2: is it preferable to replace the video with an image for the mobile version of the site? or create another version of the video optimized for small screens?
What is the best way to approach this issue and take into account all the nuances for adapting the video and fitting it to different screens?

Answer 1

/* Высота панели */
.nav {
 height: 40px
}
/* Высота блока с видео/картинкой */
.video-container {
 height: calc(100vh - 40px);
}
/* Видео отображается только на больших экранах */
video {
 display: none
}
@media (min-width:769px) {
 video {
  display: block;
 }
}

It should also be taken into account that there is no autoplay video on mobile devices.

Answer 2

viewport units?

Answer 3

I recommend using the vide.js plugin on the github source. The thing is adaptive, on mobile machines it replaces the video with an image that must have the same name as the video
No need to reinvent the wheel

Answer 4

There are solutions that can be found on the first five links of Google