Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | Fullscreen HTML5 video website background
Guest
Click to view your profile
Topics
Programs Programs
Languages Languages
Recipes Recipes
Home Home
Shortcuts
 
 

Fullscreen HTML5 video website background

Check out how easy it is to apply a full-screen HTML5 looping video as website background using only CSS and no additional scripts.

 
  Author: mat | Version: | 3rd December 2013 |  
 
 
1.
 

First thing's first, don't forget to upload the needed video files to the web server.


Also recommended:


  
 
2.
 

For the HTML part, enter the following three lines between the <body> and </body> tags:

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="Dreevoo_com_SlowMo.webm" type="video/webm"> 
<source src="Dreevoo_com_SlowMo.m4v" type="video/mp4"> Video not supported </video>

Don't forget to change the video clips names to your own, and if you uploaded your video clips to a different folder on a web server then put the folder name in front of the video clips, for instance: 

<source srce="videos/videoclip.m4v" type=video/mp4">...

Don't get confused by the m4v video file, it's pretty much the same deal as the mp4. If you uploaded mp4 file, then enter mp4 instead of m4v.

  
 
3.
 

In your CSS file simply enter the following single line:

#video_background { position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; }

Also recommended:


  
 
4.
 

And that is it! 

You can check out  HTML5 fullscreen video webpage from this tutorial and here is the CSS file you can download and use at your will.

You might want to add a pattern image overlay:

  
 
 
   
  Please login to post a comment
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO