To put a video in way background in a Webpage with HTML5 and CSS

To put a video in way background in a Webpage with HTML5 and CSS

To put a video as bottom (background) of a webpage with HTML5 being used CSS. HTML5 has become something natural for the modern navigators and is important to take advantage of all the advantages that offer to us nowadays.

As putting a video in way background in a webpage?

In this tutorial we have used the label  

Now only we must add to the following fragment of code in the page or document where they want that a video becomes as bottom of a webpage.

<video you go = " my-video? class = " video? autoplay muted loop> <source src = " videos/video.mp4? type= " video/mp4 " > </video>

If or you have a document CSS or these to create it. Within archives .CSS it places the following line of code.


div, h1, p, to, video, h2 \ {z-index: 2; position: relative; } .content \ {position: relative; top: 30%; z-index: 2; margin: 0 car; max-width: 720px; text-align: to center; } .content__heading \ {margin-bottom: 24px; color: RGB (39,39,39); font-size: 44px; } to.content__teaser \ {margin-bottom: 24px; color: RGB (89,89,89); font-size: 22px; } .content__cta \ {display: inline-block; margin: 0; padding: 12px 48px; color: RGB (255,60,100); font-size: 22px; text-decoration: none; to border: solid 4px RGB (255,60,100); } .video \ {position: fixed; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: car; height: car; transform: translate (- 50%, -50%); }

After doing the following thing, it will be able to see the realised changes.

The properties of the reproducer of video HTML5 have the following one. autoplay muted loop

Abimael Gutierrez P.

Abimael Gutierrez P.
Founder of apdesc