Video Background

Posted on 2011-04-22
Last Modified: 2012-05-11
How do I show a video as background for website using css?
Question by:abuhaneef
    LVL 1

    Expert Comment


    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:

    Also StackOverflow has an discussion about it:

    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.

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

    Open in new window

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

    Open in new window


    Author Comment

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

    Author Comment

    Also, how do you make it continuously play?
    LVL 1

    Accepted Solution


    If you look at the first link which I posted; there he calls a javascript file to handle the resizing and the continuous play.

    Here it goes:
    var Videoplayer = Class.create({ // initialize Prototype class
    initialize: function(number, options){
    this.suppliedOptions = options; // additional options
    this.defaultOptions = $H({ //default options (in a hash)
    autoPlay: true,
    wrapper: 'video'
    this.getSource(number); //init source (see below); //init video (see below)
    this.startObserving(); //observe loop and resize events
    getSource: function (number) { //receives a number according which video button you’ve clicked on the welcome page
    switch(number) { //here the different videos get directed
    case 4:
    this.srcOne = '/videos/movie_4.m4v';
    this.srcTwo = '/videos/movie_4.ogv';
    case 3:
    this.srcOne = '/videos/movie_3.m4v';
    this.srcTwo = '/videos/movie_3.ogv';
    case 2:
    this.srcOne = '/videos/movie_2.m4v';
    this.srcTwo = '/videos/movie_2.ogv';
    this.srcOne = '/videos/movie_1.m4v';
    this.srcTwo = '/videos/movie_1.ogv';
    video: function () {
    var dimensions = this.getVideoDimensions(); //how big shall the video be (see function below) = new Element('video',{width:dimensions[0],height:dimensions[1]}); = true; = true; = true; = true;
    var srcOne = new Element('source',{src:this.srcOne,type:'video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'});
    var srcTwo = new Element('source',{src:this.srcTwo,type:'video/ogg; codecs=\"theora, vorbis\"'});;; $('video').insert(;
    }, //insert html5 video code on page
    startObserving: function () {
    Event.observe(window, 'resize', function(e){ //on resize get and set new video dimensions
    dimensions = this.getVideoDimensions(); = dimensions[0]; = dimensions[1];
    this.loopVideo(); //for firefox: if the video is finished play again
    //$$('.playControl').first().observe('click',this.playControl.bindAsEventListener(this)); //optional (add play / pause)
    getVideoDimensions: function () {
    var windowWidth = document.viewport.getWidth(); var windowHeight = $('content').getHeight(); windowProportion = windowWidth / windowHeight;
    var origWidth = 480; origHeight = 270; var origProportion = origWidth / origHeight;
    var newWidth = 0; var newHeight = 0;
    if (windowProportion >= origProportion) {
    proportion = windowWidth / origWidth;
    } else {
    proportion = windowHeight / origHeight;
    newWidth = proportion * origWidth; newHeight = proportion * origHeight;
    //console.log('Window Height:%s, newWidth: %s, newHeight: %s',windowHeight,newWidth,newHeight);
    return [newWidth,newHeight]
    /*playControl: function () {
    if ( == false) {;
    $$('.playControl').first().innerHTML = "Play";
    } else {;
    $$('.playControl').first().innerHTML = "Pause";
    loopVideo: function () {
    this.t = window.setInterval(function() {
    if ( == true) {;

    Open in new window


    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Suggested Solutions

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now