We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Video Background

abuhaneef
abuhaneef asked
on
Medium Priority
571 Views
Last Modified: 2012-05-11
How do I show a video as background for website using css?
Comment
Watch Question

Commented:
Hi,

It should be done using HTML5, and bear in mind that most of the users are still using IE8 or older which doesn't have much of the support for HTML5 elements.

I found this, which is more or less the thing you want to do:
http://www.html5-fullscreen-video.com/

Also StackOverflow has an discussion about it:
http://stackoverflow.com/questions/3899865/can-you-display-html5-video-as-a-full-screen-background

There's a quick solution which uses the HTML5 video tag. Make it position fixed and throw it behind everything else using the z-index.

HTML
<video id="video_background" src="video.mp4" autoplay>

Open in new window


CSS
#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

Open in new window


Author

Commented:
Thanks...Is there a way to make it full screen?

Author

Commented:
Also, how do you make it continuously play?
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.