How to insert video in website background

First you will need

fullbgvideo

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;
}
</style>

Load libraries

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></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).wrapInner('<div/>');
$(document.body).prepend($('<div><div id="videobgelement"></div></div>'));
//set browser video height and browser height
var ww = $(window).width();
var wh = $(window).height();
jwplayer("videobgelement").setup({
autostart: 1,
controls: 0,
width: ww,
height: wh,
//skin:'jwplayer/jwplayer-skins-free/five.xml',
'shuffle': 'true',
'repeat': 'true',
playlist: [
{file: "http://www.youtube.com/watch?v=rlYVhDKCbqY", image: "http://img.youtube.com/vi/rlYVhDKCbqY/0.jpg"},
{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) {
e.preventDefault();
//$(document).attr('title', function (i,val){ return ''; + val; });
jwplayer().pause();
});
$('#jwbuttonmute').click(function (e) {
e.preventDefault();
jwplayer().setMute();
})
});
//be responsive
$(window).resize(function () {
var ww = $(this).width();
var wh = $(this).height();
$('.videobgelement>div').width(ww + 'px');
$('.videobgelement>div').height(wh + 'px');
});
</script>

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