I have a button that when clicked, pops up a video content that can be played. The problem is that if I close the popup while the video is playing, it does not stop and keeps playing in the background.
This is the code I'm using for the button and video
<div>
<a id="click-me">Click Me</a>
</div>
<div id="popup-mpdal" style="display:none;">
<div class="">
<video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
<source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
</video>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
EDIT
I have edited the code like below, but still getting the same error
<div>
<a id="click-me">Click Me</a>
</div>
<div id="popup-mpdal" style="display:none;">
<div class="">
<video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
<source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
</video>
</div>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: 'X',
class: 'action-close',
attr: 'data-role="closeBtn"',
click: function () {
$('#videoplayer').remove();
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>