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时触发模式完成关闭

由于WordPress视频短代码呈现HTML5 Video，你可以运行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 
});