Video Background

How do I show a video as background for website using css?
abuhaneefAsked:
Who is Participating?
 
idustyConnect With a Mentor Commented:
Hi,

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

http://www.html5-fullscreen-video.com/html5_fullscreen/tutorial/fullscreen_solutions/18

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)
this.video(); //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';
break;
case 3:
this.srcOne = '/videos/movie_3.m4v';
this.srcTwo = '/videos/movie_3.ogv';
break;
case 2:
this.srcOne = '/videos/movie_2.m4v';
this.srcTwo = '/videos/movie_2.ogv';
break;
default:
this.srcOne = '/videos/movie_1.m4v';
this.srcTwo = '/videos/movie_1.ogv';
break;
}
},
video: function () {

var dimensions = this.getVideoDimensions(); //how big shall the video be (see function below)

this.video = new Element('video',{width:dimensions[0],height:dimensions[1]});
this.video.preload = true;this.video.autoplay = true; this.video.loop = true;this.video.autobuffer = 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\"'});
this.video.insert(srcOne);this.video.insert(srcTwo); $('video').insert(this.video);
}, //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();
this.video.width = dimensions[0];
this.video.height = dimensions[1];
}.bind(this));

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 (this.video.paused == false) {
this.video.pause();
$$('.playControl').first().innerHTML = "Play";
} else {
this.video.play();
$$('.playControl').first().innerHTML = "Pause";
}
},*/

loopVideo: function () {
this.t = window.setInterval(function() {
if (this.video.ended == true) {
this.video.play();
}
}.bind(this),500);
}});

Open in new window

0
 
idustyCommented:
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


0
 
abuhaneefAuthor Commented:
Thanks...Is there a way to make it full screen?
0
 
abuhaneefAuthor Commented:
Also, how do you make it continuously play?
0
All Courses

From novice to tech pro — start learning today.