在“手风琴”选项卡更改上暂停视频

时间:2019-06-14 20:37:08

标签: video twitter-bootstrap-3 tabs collapse pause

我正在寻找一种在手风琴视图(超小型浏览器)上更改选项卡以在每次更改选项卡时暂停视频的方法。

当前,当选项卡更改时,我具有选项卡视图的功能。这是一段代码,请参见full code

的小提琴
<div class="tab-pane" id="video">
<div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent=".tab-pane" href="#collapseFour">
            <h4 class="panel-title">
                Videos <i class="fa fa-chevron-right pull-right"></i>
            </h4>
        </a>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
        <div class="panel-body">
            <div style="position: relative; display: block; max-width: 100%;">
                <div style="padding-top: 56.25%;"><iframe style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="//players.brightcove.net/618591172001/default_default/index.html?videoId=5845023855001"></iframe></div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

(function($) {
$(document).on('click', '.fusion-tabs', function () {
    $("iframe").each(function() { 
      var src= $(this).attr('src');
      $(this).attr('src',src);  
    });
}); })( jQuery );

将此代码放在WordPress设置中的body标签之后。