Zurb Foundation Reveal 关闭时停止视频（原生 Wordpress 播放器）

Question

我正在使用 Reveal from Zurb Foundation 在单击按钮时显示模式框。当模态弹出时，其中有一个使用 Wordpress 的本机视频播放器的视频。如果按下关闭按钮，模态消失但视频继续播放

这就是我使用 Wordpress's native video player 嵌入视频的方式：

<?php $video = get_sub_field('video_link');
echo do_shortcode("[video src='$video']"); ?>

如何在模态关闭时停止视频？

这是我的一些上下文代码：

<div class="reveal large" id="video-modal-<?php echo $counter; ?>" data-reveal>
    <?php $video = get_sub_field('video_link');
    echo do_shortcode("[video src='$video']"); ?>
    <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
    </button>
</div>

<a class="button small-clear-button button-<?php echo the_sub_field('colour'); ?>" href="<?php if(get_sub_field('link') != "") { echo the_sub_field('link'); } else { echo "#"; } ?>" <?php if(get_sub_field('video_link') != "") { ?>data-open="video-modal-<?php echo $counter; ?>"<?php } ?>><?php echo the_sub_field('link_text'); ?></a>

Answer 1

您可以玩 Reveal JS Events，特别是 closed.zf.reveal:

closed.zf.reveal Fires when the modal is done closing

并且由于 WordPress 视频简码呈现了一个 HTML5 Video, you can run the pause() 函数，如下所示：

jQuery(document).on('closed.zf.reveal', '#video-reveal-%', function(event) { // The % is what your PHP prints
    jQuery(this).find('video')[0].pause(): // Looks for a video tag within $this modal
});

Zurb Foundation Reveal 关闭时停止视频（原生 Wordpress 播放器）

Stop video (native Wordpress player) when Zurb Foundation Reveal is closed

wordpress

video

jquery

zurb-foundation