Adaptive video as a background site caps
Recently I faced an interesting challenge: to set the video in the header of the site as a background. The cap always occupies the first screen and is set on the background-position principle : 50% 0 . The bottom line is that on the tablet we see the video completely, but on the phone it is clipped at the edges and only the central part remains below.
Let's start with the preparation of the video. We define the maximum size of our cap and fit our video for them. For example, take the size of the iPad as the maximum values of the cap: 1024 * 768 (well, or 768 * 1024, this is how to keep).
Let's start the markup.
')
HTML
CSS
Codepen example
We set the height of html, body to 100 percent and then we can stretch our header to the height of the screen. We place header__video-wrapp in it, stretching it by positioning on the whole header block and setting it overflow: hidden . Next, create another header__video-box block and put our video element in it. Absolutely position the block header__video-box left: 50% top: 0 and go to the video block, ask it transform: translateX (-50%) - this is move it 50% relative to its width left. And since it starts relative to the center of the block, its center will always be in the center of the block. Now set the height to 100% and the minimum height of 768px. Thus, we will be able to completely fill the cap on the iPade in any position, and on the iPhone we will hide the lower part of the video.
There is a second option how to put the video in the center.
In this example, it is positioned by centering the text. The HTML markup will not change, but the CSS in the header__video-box and header__video blocks will change.
CSS
Codepen example
In the header__video-box block, we set the text alignment in the center and negative margins, stretching the block beyond the parent’s chapel, so that it would always be more video and centered. Header block __video we expose display: inline-block and now it will be located in the center. Add height, minimum height and vertical alignment, and now everything is ready.
I gave an example for tablets and phones, but this approach can be easily used for different screen resolutions.
I did not take into account the moment of the autoplay ban ... Well, we are making a big beautiful play button so that you can start watching the video whenever we want.
Let's start with the preparation of the video. We define the maximum size of our cap and fit our video for them. For example, take the size of the iPad as the maximum values of the cap: 1024 * 768 (well, or 768 * 1024, this is how to keep).
Let's start the markup.
')
HTML
<div class="header"> <div class="header__video-wrapp"> <div class="header__video-box"> <video class="header__video" loop autoplay> <source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Winter-Grass.mp4" type="video/mp4"> <source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Winter-Grass.mp4" type="video/webm"> </video> </div> </div> <div class='header__video-play' onclick='document.getElementById("header__video").play();'>play</div> </div> CSS
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { min-height: 100%; } .header { width:100%; height: 100%; max-height: 1024px; background: #000; overflow: hidden; position: relative; } .header__video-wrapp { position:absolute; top:0; left: 0; right: 0; bottom: 0; overflow: hidden; } .header__video-box { position: absolute; top:0; left: 50%; height: 100%; } .header__video { display: inline-block; height: 100%; transform: translateX(-50%); min-height: 768px; } .header__video-play{ width: 100px; position: relative; border-radius: 50%; padding: 35px 0; background: #fff; top: 10px; left: 25px; box-shadow: 0 0 12px 1px #000; font-size:22px; text-align: center; } Codepen example
We set the height of html, body to 100 percent and then we can stretch our header to the height of the screen. We place header__video-wrapp in it, stretching it by positioning on the whole header block and setting it overflow: hidden . Next, create another header__video-box block and put our video element in it. Absolutely position the block header__video-box left: 50% top: 0 and go to the video block, ask it transform: translateX (-50%) - this is move it 50% relative to its width left. And since it starts relative to the center of the block, its center will always be in the center of the block. Now set the height to 100% and the minimum height of 768px. Thus, we will be able to completely fill the cap on the iPade in any position, and on the iPhone we will hide the lower part of the video.
There is a second option how to put the video in the center.
In this example, it is positioned by centering the text. The HTML markup will not change, but the CSS in the header__video-box and header__video blocks will change.
CSS
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { min-height: 100%; } .header { width:100%; height: 100%; max-height: 1024px; background: #000; overflow: hidden; position: relative; } .header__video-wrapp { position:absolute; top:0; left: 0; right: 0; bottom: 0; overflow: hidden; } .header__video-box { text-align: center; margin: 0 -1000px; height: 100%; } .header__video { display: inline-block; vertical-align: top; height: 100%; min-height: 768px; } Codepen example
In the header__video-box block, we set the text alignment in the center and negative margins, stretching the block beyond the parent’s chapel, so that it would always be more video and centered. Header block __video we expose display: inline-block and now it will be located in the center. Add height, minimum height and vertical alignment, and now everything is ready.
I gave an example for tablets and phones, but this approach can be easily used for different screen resolutions.
I did not take into account the moment of the autoplay ban ... Well, we are making a big beautiful play button so that you can start watching the video whenever we want.
Source: https://habr.com/ru/post/267519/
All Articles