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 v-html="program.description"></div>
</div> </div>
<div class='text-right p-3'> <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"> <a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
{{ buttonName }} {{ buttonName }}
</a-button> </a-button>

View File

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