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
  Click to open user profile  
thefansbuzz, 19th Feb 2023, 7:33 PM
Cheap SMM Panel Social Media Marketing is a huge field with a lot of competition. If you want to stand out from the crowd, you need to know how to find ways to make your content go viral. If you are interested in using social media to market your product, this service is perfect for you. The panel gives you access to hundreds of different social media sites, so that you can find new ways to market your business. Visit our website at: https://thefansbuzz.com/
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO