fix: Video stops on closing modal

This commit is contained in:
scmmishra 2019-03-28 13:11:00 +05:30
parent 526af9d268
commit 15f6faad9b
2 changed files with 30 additions and 35 deletions

View File

@ -9,7 +9,7 @@
<div v-html="program.description"></div>
</div>
<div class='text-right p-3'>
<button class='btn btn-secondary btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
<button class='btn btn-secondary btn-sm text-white' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
{{ buttonName }}
</a-button>

View File

@ -1,40 +1,35 @@
<template>
<div class="modal" id="videoModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + videoID"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="videoModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span id="close_modal" aria-hidden="true" @click="stopVideo()">&times;</span>
</button>
</div>
<div class="modal-body">
<youtube-player :url="video" :allowfullscreen="'false'"/>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import YoutubePlayer from './YoutubePlayer.vue'
export default {
name: 'VideoModal',
props: ['title', 'video'],
computed: {
videoID() {
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
if (this.video.includes('v=')){
return this.video.split('v=')[1].split('&')[0]
}
else if (this.video.includes('youtu.be')) {
return this.video.split('/').last().split('?')[0]
}
}
}
name: 'VideoModal',
props: ['title', 'video'],
components: {
YoutubePlayer
},
methods: {
stopVideo() {
$('.yvideo').each(function() {
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});
}
}
};
</script>