使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?相关的知识,希望对你有一定的参考价值。

我正在使用最新的Foundation 6.4.xLight YouTube Embeds script by @labnol

我在标准的html页面中使用此代码:

<button data-toggle="animatedModalVideoTest1" class="hollow button expanded alert" href="##">View video</button>

相应的基金会揭示模态是这部分:

<div class="reveal" id="animatedModalVideoTest1" data-reveal data-close-on-click="true" data-animation-in="fade-in" data-animation-out="fade-out">
<button class="button  float-right" data-close type="button">
    <span aria-hidden="true">&times;</span> Close modal window
</button>

 <div class="responsive-embed">
   <div class="youtube-player" data-id="xecEV4dSAXE"></div>
 </div>

当我点击“关闭窗口”时,视频会在后台继续播放。任何能够提出如何阻止这种想法的js专业人士将不胜感激:-)

PS:这里链接的视频对工作安全(John Oliver)

答案

尝试使用..来自zurb-forum的这个链接:https://foundation.zurb.com/forum/posts/39375-stop-video-when-closing-a-reveal-modal-with-foundation-6 ..适合我!

data-reset-on-close="true"插入您的标记。

 <div class="large reveal" id="myvideo" data-reveal data-reset-on-close="true">

        <iframe width="560" height="315" src="https://www.youtube.com/embed/xxxyyyzzz?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>

      <button class="close-button close-reveal-modal" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

以上是关于使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?的主要内容,如果未能解决你的问题,请参考以下文章

UIWebView 模态 YouTube 播放器“完成”按钮操作

以模态自动播放Youtube视频? (Avada Wordpress主题)

更改 YouTube 视频嵌入的背景颜色

UIWebView 中的嵌入式 youtube 播放器正在破坏视图层次结构

嵌入式 youtube 视频未通过 iframe 和 php 显示

从youtube嵌入缩略图和视频(php - Wordpress)