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
Languages
Recipes
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/
 
 
  Click to open user profile  
SMM panel, 5th Jan 2024, 8:18 AM
By providing a consolidated platform for different services like post scheduling, follower interaction, and analytics, using an https://bulkfollows.com/ simplifies social media administration. For marketers, this is a priceless tool that increases productivity and guarantees a consistent online presence. An SMM panel's many features make it a valuable tool for navigating the ever-changing world of social media marketing, promoting expansion and brand awareness.
 
 
  Click to open user profile  
instagrampane, 12th Feb 2024, 10:44 AM
An Instagram panel, also known as a https://smmpakpanel.com/ is a platform or service that provides people and businesses with a range of Instagram marketing options. These panels offer resources and services to assist users with expanding their Instagram following, visibility, and interaction.

 
 
  Click to open user profile  
Kokufm, 1st Mar 2024, 5:03 PM
Exploring innovative avenues for social media marketing is crucial in today's competitive landscape. A Cheap SMM Panel like this offers a diverse range of platforms to elevate your content and amplify your brand's reach. https://storysaver.page/
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO