Big Video inside a container about bigvideo.js HOT 12 CLOSED

+1. How can i set the destination div?

from bigvideo.js.

Currently you can’t. Might add that at some point, but for now I recommend you guys use VideoBG: http://syddev.com/jquery.videoBG/

from bigvideo.js.

Oh. Thanks! That's perfect.

PS. bu then i ask what's the default DOM element in wich BigVideo.js tries to put the video bg? The body? Because i was not able to use it in a yootheme joomla template that with some css rules uses another div as the background, not the body.

from bigvideo.js.

VideoBG isn't quite as fully-featured as I needed, so for anyone who wants to quickly hack this in:

I just replaced $('body') and $(window) with the ID of the div I wanted filled--in my case, $('#block-block-11'). (Thanks Drupal, that's some super semantic block naming.)

To be clear: that's not exactly best practice, and if you want BigVideo to be in any way reusable elsewhere on your site, don't do that, but deadlines are deadlines, right? :)

from bigvideo.js.

Seems like it's now possible, there is a container option added by @johnpolacek
https://github.com/dfcb/BigVideo.js/blob/master/lib/bigvideo.js#L-35

Usage example

$(function() {
    BV = new $.BigVideo({useFlashForFirefox:false, container:$('.slider.home')});
    BV.init();
    BV.show('test.mp4', {altSource:'test.ogv', ambient:true});
});

from bigvideo.js.

Has anyone gotten this working successfully? Have an example? The usage example above from @thejae doesn't seem to work for me.

from bigvideo.js.

It did work for me, using this container:
< div class="video-wrapper" >< /div >
and then:

jQuery(function($) {
    var BV = new $.BigVideo({useFlashForFirefox:false, container:$('.video-wrapper')});
    BV.init();
        if (Modernizr.touch) {
        BV.show('image.jpg');
    } else {
        BV.show('video.mp4',{ambient:true});
    }
});

from bigvideo.js.

@zillionsk8 thanks. Did that allow you to actually contain bigvideo inside your wrapper div, or did it still take up the entire browser window?

Ideally, I want to be able to have a bigvideo.js video at the top of a page as a header but also be able to scroll down and have more content below it, and I haven't yet found a way to accomplish that.

from bigvideo.js.

Yes, it populated the BigVideo generated content inside that wrapper div but then it takes over the height settings and eats whatever is under, you could control it using something like:

$('#big-video-vid_html5_api').css('height','100px');

or percentage:

$('#big-video-vid_html5_api').css('height','50%');

from bigvideo.js.

In case anyone has issues using the container option, the negative left margin on #big-video-vid causes an overflow issue during resizing. Placing an overflow:hidden on big-video-wrap solves it.

from bigvideo.js.

This method ( $('#big-video-vid_html5_api').css('height','100px'); ) did not works for me, I used iframe with height: 777px; width: 100% and border:0; and static page with player, attached to body...

from bigvideo.js.

You need to specify the container of the BigVideo object:
BV = new $.BigVideo({container: $('.video-wrap')});

from bigvideo.js.