Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the dynamic video background of the front page of web". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "web front-end home page dynamic video background how to achieve" it!

First of all, find a clear video on the Internet to download, preferably in MP4 format.

After downloading, we create a new html file to write the code:

Html Code:

A video tag is wrapped. Source represents the source file, autoplay attribute is automatic playback, loop represents loop playback, and muted represents silent playback.

If you do not add the autoplay attribute, it will not be played automatically, and the page will be displayed on a black screen.

Css Code:

* {margin: 0px; padding: 0px;} video {position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto / * filter * / / * filter: blur (15px); / / background blur setting * / / *-webkit-filter: grayscale; * / / * filter:grayscale; / / background grayscale setting * / z-index:-11} source {min-width: 100% Min-height: 100%; height: auto; width: auto;}

The css code is mainly for positioning and magnifying to achieve the effect of full-screen playback, mainly setting the width and height of the video, and don't forget to give the z-index a value, so that it can be placed at the bottom, as long as it is less than 0, there is no effect.

In this way, our dynamic video background is complete. If you want to set the playback speed, we can add js code (video tag plus id= "v1" attribute):

Var video= document.getElementById ('v1'); video.playbackRate = 1.5

So what if we want to add content to the page?

123465

Yes, add it outside the video tag

At this point, I believe that everyone on the "web front-end home page dynamic video background how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.