Как использовать BigVideo.js внутри div?

Я пытаюсь содержать BigVideo.js для одного div (например, единицы героя), но он продолжает поглощать фон тела. Я использую код примера на главной странице BigVideo.js:

 <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>

Я попытался сделать что-то вроде этого:

  <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>

Ответ 1

Вам нужно правильно указать контейнер объекта BigVideo (я не уверен, что это была опечатка, но все выглядит нормально)

BV = new $.BigVideo({container: $('#video-wrap')});

Класс

BV = new $.BigVideo({container: $('.video-wrap')});

При создании объекта он устанавливает по умолчанию тело (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
        };

Затем отправляемые вами параметры объединяются с помощью $.extend()

var settings = $.extend({}, defaults, options);

Ответ 2

Ответ выше только частично отвечает на вопрос. Вы должны изменить или переопределить CSS для '# большого видео-обертывания' в bigvideo.css. Изменение фиксировано на абсолютное, и видео будет отображаться только в контейнере.

#big-video-wrap {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Для

#big-video-wrap {
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}