How to insert video in website background

First you will need


Full Screen Set up

<style type="text/css">
.jwrapbuttons {
max-width: 330px;
margin: 0 auto;
.jwbutton {
font-weight: bold;
font-size: 26px;
padding: 10px 30px;
border: 2px solid #ff0000;
color: #ff0000;
display: inline-block;
text-decoration: none;
margin: 50px 10px;
background: rgba(255, 0, 0, 0.3);
.videobgelement {
position: fixed !important;
z-index: -1;
top: 0;
left: 0;

Load libraries

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>

Add javascript  code

You config to add youtube videos or local video file
<script type="text/javascript">
$(function () {
$(document.body).prepend($('<div><div id="videobgelement"></div></div>'));
//set browser video height and browser height
var ww = $(window).width();
var wh = $(window).height();
autostart: 1,
controls: 0,
width: ww,
height: wh,
'shuffle': 'true',
'repeat': 'true',
playlist: [
{file: "", image: ""},
{file: "content/limitless.flv", image: 'content/limitless.jpg'},
{file: "content/dock.mp4"},
{file: "content/event.mp4"},
//buttons part
$('.container').prepend('<div><a href="#" id="jqbuttonpause">pause</a> <a href="#" id="jwbuttonmute">mute</a></a></div>');
$('#jqbuttonpause').click(function (e) {
//$(document).attr('title', function (i,val){ return ''; + val; });
$('#jwbuttonmute').click(function (e) {
//be responsive
$(window).resize(function () {
var ww = $(this).width();
var wh = $(this).height();
$('.videobgelement>div').width(ww + 'px');
$('.videobgelement>div').height(wh + 'px');

Tagged with: [ , , ]
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

Leave a Comment