切换下一个标签页后,停止为带有YouTube视频的引导标签页付款

问题描述

我有一个Bootstrap标签,其中添加了3个视频,这些视频作为iframe从youtube添加。我的问题是,当我在第一个选项卡上播放视频时移至第二个或第三个选项卡时,它不会停止/暂停。同样,当此选项卡模块添加到模型弹出窗口中时,当我关闭弹出窗口时,它仍在后台运行视频。想知道如何在移至另一个标签页或关闭弹出窗口后停止或暂停该视频吗?

<div class="modal-body">
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><iframe src="https://www.youtube.com/embed/cCxcxRw9j_s?rel=0&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=0" allowfullscreen="" width="100%" height="699" frameborder="0"></iframe></div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><iframe src="https://www.youtube.com/embed/sivXk8cTPIA?rel=0&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=0" allowfullscreen="" width="100%" height="436" frameborder="0"></iframe></div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"><iframe src="https://www.youtube.com/embed/bT9Tta7xWdo?rel=0&amp;modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;controls=0" allowfullscreen="" width="100%" height="436" frameborder="0"></iframe></div>
    </div>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" onclick="changeVideo('https://www.youtube.com/watch?v=cCxcxRw9j_s&t=6s');"><span>VIDEO 1</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" onclick="changeVideo('https://www.youtube.com/watch?v=sivXk8cTPIA&t=6s');"><span>VIDEO 2</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" onclick="changeVideo('https://www.youtube.com/watch?v=bT9Tta7xWdo&t=6s');"><span>VIDEO 3</span></a>
        </li>
    </ul>
</div>

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...