Back to list of all examples

Useful Stuff About:
Implementing a video as a background

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

Create a video with the following parameters:

• Video has no obvious beginning or end so it loops seamlessly without a "glitch"
• Video has dimensions of at least 960x540 so it doesn't become too pixelated when stretching the video to fit larger screen sizes
• Video has footage that looks good even when disproportionally resized to fit a non-standard 4:3 or 16:9 browser window
• Video has file name of Background_Video to match what the code below expects to find
• Video is rendered/converted into different formats so that it will show up on all modern browsers (Safari, Chrome, IE, Firefox, Opera, etc.)
  
  • Background_Video.mp4 (use https://video.online-convert.com/convert-to-mp4 to convert your video to .mp4 format for non-Firefox browsers)
  • Background_Video.ogv (use https://video.online-convert.com/convert-to-ogg to convert your video to .ogv format for Firefox browsers)
  • Background_Video.webm (use https://video.online-convert.com/convert-to-webm to convert your video to .webm format Firefox & Chrome browsers)

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="https://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="https://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:

• The name and above javascript code has mis-matching video file names.
• The relative path to the video in the above javascript code is incorrect.
• The videos are not uploaded to the webserver.

Variation: Videos as background of a div

Here are some key items about making this work

• Create a video close to the dimensions of your div
• Give the div an ID so you can target it with javascript
• Use NO padding in the CSS for the div which will cause undesired video edges
• Because there is NO padding, you can target and format any <p> tag inside the div with a margin of 5-10px on the right and left to separate and text away from the div border

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="https://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="https://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>