Keep in mind that using display: none on the video element won’t prevent it from downloading. In this example we will use the same image that is used for poster attribute in the video. This is because most mobile platforms won’t autoplay HTML5 video and will display it with an embedded play button on top of our content. One more thing we should do is hide the video on mobile and just show the background image. That’s it! We have a full screen video background for our website! The easiest way to fix this is to stretch the video to be taller and wider than our screen then use the negative margins to centre it. Looks OK except now, when we resize the window, the video doesn’t center itself. We’ll make it taller or wider depending on the browser viewports aspect ratio. We can fix this by stretching our video viewport to be larger than our browser viewport. Notice the white space on the top and bottom of the screen. Our video background in a viewport that doesn’t match 16:9 aspect ratio. This is a problem because in most cases our video element aspect ratio will be different than our video source aspect ratio (in this case 16:9). Now our video element has the width and height of the viewport (our browser window). Therefore it’s good practice to use the first frame of a video for a poster image. The image used in a poster attribute will be replaced by the first frame of the video when it loads. We create a simple HTML5 video element with loop, autoplay and muted attributes and place it inside a container element.
CSS background and background-image properties only accept colours, gradients, bitmaps and SVG as values. In fact it can be done using only CSS only. Pulling off the video background effect is pretty simple. This extended time on the site could potentially lead to more interaction with other content on the page. A good video background can easily make people stop and take notice, increasing the time they spend on the site. Video is probably the number one way to draw attention. Fullscreen images used as backgrounds have an amazing visual impact, but did you know that you can use video background in exactly the same way?
Creating a fullscreen HTML5 video background with CSSįullscreen background has become very popular in web design lately.
0 kommentar(er)
