I am having issues with Youtube video playing in Magento 2.2 store using modal popup to display video.
Here is what I am using to for modal window:
<div id="video-modal" style="display:none;">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/u6pzhZ6V_pc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
title: '',
buttons: [{
text: $.mage.__('Close'),
class: 'close-modal',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#video-modal'));
$("#click-vlink").on('click',function(){
$("#video-modal").modal("openModal");
});
}
);
</script>
Problem is that after modal closes the video keeps playing. I have tried to remove the iframe, but that ends up removing all iframes if there are more than one modal on a cms page. Ie:
$(".action-close").click(function(){
$("iframe").remove(); //For Safety
});