Responsive video as website header background

Recently I ran into an interesting task: set the video as a background in the header of the site. The header always occupies the first screen and is set according to the principle of background-position: 50% 0 . The bottom line is that on the tablet we see the video completely, but on the phone it is cropped at the edges and only the central part remains from the bottom.



Let's start by preparing the video. Let's determine the maximum sizes of our caps and customize our video for them. For example, let's take the dimensions of the iPad as the maximum values ​​for the header: 1024 * 768 (well, or 768 * 1024, this is how to keep it).

Let's start marking up.

HTML

play

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

Example on codepen Set the

height of html, body to 100 percent, after which we can stretch our header to the height of the screen. We put header__video-wrapp in it , stretching it by positioning it on the entire header block and setting it overflow: hidden . Next, create another header__video-box and put our video element in it . We absolutely position the header__video-box left: 50% top: 0 block and go to the video block , set it to transform: translateX (-50%)- is to move it 50% of its width to the 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 to 768px. Thus, we can completely fill the cap on the iPade in any position, and on the iPhone we’ll hide the bottom of the video.

There is a second option how to place the video in the center.

In this example, it is positioned to center the text. HTML markup will not change, but CSS will change in the header__video-box and header__video blocks .

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 with negative margins we stretch the block beyond the parent's side -chapters , so that it would always be larger than the video and centered. To the header__video block we set 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 didn’t take into account the moment the autoplay was banned ... Well, we’re doing a big beautiful play button so that you can start watching the video whenever you want.

Also popular now: