Quantcast
Channel: Active questions tagged youtube-api - Stack Overflow
Viewing all articles
Browse latest Browse all 3831

Vue youtube embed pause other video when playing another

$
0
0

I'm using this plugin https://www.npmjs.com/package/vue-youtube-embed to create two videos on a page in a vue app I am building. What I am trying to do is when playing one video pause the other. I was able to achieve this if the videos are in the same component using refs. My problem is each of the videos is nested inside a component and then placed on a parent page. Is there a way to have the same functionality but called from the parent? or a sibling communication?

Same Component: (works as expected)

<div><div class="l-text-image-band-media"><youtube video-id="0mS0uT_wrhg" @playing="stopOtherVideo('player2')" ref="player1"></youtube></div><div class="l-text-image-band-media"><youtube video-id="0md0uT_wg7g" @playing="stopOtherVideo('player1')" ref="player2"></youtube></div></div> methods: {    stopOtherVideos(target) {      this.$refs[target].player.stopVideo();    },  }

Parent: (each component with videos nested in each)

<template><div><main class="main-content" id="main-content" tabindex="-1"><ResponsibilityByTheNumbers is-video-component="true" :text="handsOnText" /><ResponsibilityWhiteBandLeftText is-video-component="true" :showPrism="showPrism"                :text="stemVideoBandText" /></main></div></template>

Viewing all articles
Browse latest Browse all 3831

Trending Articles