fix: Video stops on closing modal
This commit is contained in:
parent
526af9d268
commit
15f6faad9b
@ -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>
|
||||
|
@ -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">×</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()">×</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>
|
Loading…
x
Reference in New Issue
Block a user