I'm trying to contain BigVideo.js to a single div (such as a hero unit) but it continues to takeover the body background. I'm using the example code on the BigVideo.js homepage:
<script type="text/javascript">
var BV;
$(function() {
// initialize BigVideo
BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});
</script>
I tried doing something like this:
<script type="text/javascript">
var BV;
$(function() {
// initialize BigVideo
BV = new $.BigVideo({
container: $('video-wrap')
});
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});
</script>
You need to specify correctly the container of the BigVideo object (I'm not sure if it was a typo but everything seems ok)
ID
BV = new $.BigVideo({container: $('#video-wrap')});
Class
BV = new $.BigVideo({container: $('.video-wrap')});
In the creation of the object it sets to default the body (BigVideo Code):
var defaults = {
// If you want to use a single mp4 source, set as true
useFlashForFirefox:true,
// If you are doing a playlist, the video won't play the first time
// on a touchscreen unless the play event is attached to a user click
forceAutoplay:false,
controls:false,
doLoop:false,
container:$('body'), //Container
shrinkable:false
};
Then the options that you send are merged using $.extend()
var settings = $.extend({}, defaults, options);
The answer above is only partially answering the question. You should change or override the CSS for '#big-video-wrap' in bigvideo.css. Change fixed to absolute and the video will be only visible in it's container.
From
#big-video-wrap {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
To
#big-video-wrap {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With