我正在寻找一种方法,在更改手风琴视图(xtra-small浏览器(上的选项卡时,每当我更改选项卡时都会暂停视频。
目前,我具有选项卡更改时的选项卡视图功能。这是一段代码 请参阅小提琴以获取完整代码
<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>
(function($) {
$(document).on('click', '.fusion-tabs', function () {
$("iframe").each(function() {
var src= $(this).attr('src');
$(this).attr('src',src);
});
}); })( jQuery );
将此代码放在WordPress设置中的body标签之后。