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 
});