如何在div內使用BigVideo.js？

我試圖將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>

來源

2014-03-31 Alex

主標題「的jQuery插件大背景視頻」的網頁上http://dfcb.github.io/BigVideo。 js /建議我選擇了錯誤的插件。嘗試一個在這裏http://www.videojs.com/而不是 – andrew

它應該工作好，只需指定什麼是視頻包裹的ID或類。但是，您可以指定視頻的容器，插件所需的所有DOM對象都將附加到該容器。 –

您需要正確指定BigVideo對象的容器（我不知道是否是一個錯字，但一切似乎確定）

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

類

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

在創建它設置爲默認身體（BigVideo代碼）對象：

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

來源

2014-03-31 20:05:58

用於列出默認值的+1 – JoshuaDavid

感謝Eduardo！ –

不適用於我。仍佔用整個頁面。 –

上面的答案只是部分回答了這個問題。您應該更改或覆蓋bigvideo.css中'＃big-video-wrap'的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; 
}

來源

2015-04-03 11:32:19

感謝這個答案，這真的很方便。 –

如何在div內使用BigVideo.js？

回答

相關問題