如何在模式关闭后暂停嵌入式 Google 云端硬盘视频

Question

我正在使用Ella主题在Shopify网站上工作。 我已经成功地将产品视频嵌入到主题的代码中，因此可以在弹出式模式窗口中播放。 一切都很好，除了一个问题 - 当模态关闭时，视频继续在后台播放。

这是我在 product.liquid 文件中使用的模式：

<div class="modal fade halo_modal-custom" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<a data-dismiss="modal" class="close close-modal" title="{{ 'cart.ajax_cart.close' | t }}" href="javascript:void(0)">
{% include 'icon-close' %}
</a>
</div>
<div class="modal-body">
<div class="videoWrapper" id="my-player">
{%  if product.description contains '/video' %}
{% assign src = product.description | split:'<video' | last | split:'</video>' | first %}
<video id="my_video_player" {{src}}> </video>
{%  elsif product.description contains 'iframe' %}
{% assign src = product.description | split:'<iframe' | last | split:'</iframe>' | first %}
<iframe id="my_video_player" {{src}}> </iframe>
{% endif %} 
</div>
</div>
</div>
</div>
</div>

我没有编程经验。 谁能帮我解决问题？

Answer 1

请添加此脚本

<script>
function closeModal() {
$('.halo_modal-custom').hide();
$("#my-player iframe").attr("src", $("#my-player iframe").attr("src"));
}
$('.close').on('click',function(){
closeModal();
}};
</script>