Back to list of all examples

Useful Stuff About:
Implementing a video as a background

Thanks to http://syddev.com/jquery.videoBG/ for this stuff.

Create a video with the following parameters:

Create a Background_Video.jpg of the same dimensions as a photo backup for browsers that can't display the video. Put all the video and the .jpg files in the same folder/directory such as you projectX/media folder.

To make it all visible, simply copy and paste this code below into the head of your html page or template, then test it on all browsers.


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Don't have two or more of this line on the same page-->
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/videoBG.js"></script><!--Don't have two or more of this line on the same page-->
<script type="text/javascript">
$(document).ready(function(){
$("body").css({
"margin":"0",
"padding":"0"
});
$("body").append("<div id=\"bgVid\"></div>");
$("#bgVid").css({
"position":"absolute",
"width":$(window).innerWidth(),
"height":$(window).innerHeight(),
"z-index":"-1",
"top":"0",
"left":"0",
"margin":"0",
"padding":"0"
});
$("#bgVid").videoBG({
position:"fixed",
zIndex:0,//makes the video the farthest back
mp4:"../media/Background_Video.mp4",//for non-FF browsers
ogv:"../media/Background_Video.ogv",//for FF
webm:"../media/Background_Video.webm",//for FF & Chrome
poster:"../media/Background_Video.jpg",//for non-HTML5 supported browsers
opacity:1,
fullscreen:true//VERY IMPORTANT!
});
});
</script>

Typical problems:

Variation: Videos as background of a div

Here is a rotated div with a video as a background.

Here are some key items about making this work

Copy and paste this code below into the head of your html page or template - be sure to change IDofDiv with the actual div ID.


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Don't have two or more of this line on the same page-->
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/videoBG.js"></script><!--Don't have two or more of this line on the same page-->
<script type="text/javascript">
$(document).ready(function(){
$("IDofDiv").videoBG({
zIndex:0,//makes the video the farthest back
mp4:"../media/Div_Background_Video.mp4",//for non-FF browsers
ogv:"../media/Div_Background_Video.ogv",//for FF
webm:"../media/Div_Background_Video.webm",//for FF & Chrome
scale:true
});
});
</script>