Vuetify v-dialog to stop playing video on close

Question

I have a playlist that plays a combo of audio and video files. For the video I use a v-dialog to to play an embedded Youtube or Vimeo player. What I would like to do is when I close the v-dialog for the video the video stops playing. Is there a simple way to force the video to stop playing? Currently the dialog closes but the video sound is still playing in the background?

  <v-list>
    <v-list-item
      v-for="media in media"
      :key="media.id"
      class="mb-2"
    >
      <v-list-item-content
        class="pa-4"
      >
        <v-list-item-title
          class="title"
          v-text="media.title"
        />
      </v-list-item-content>

      <v-list-item-action>
        <div>
          <v-btn
            icon
            @click="pause"
          >
            <v-icon>pause</v-icon>
          </v-btn>
          <v-btn
            v-else
            icon
            @click="play(media)"
          >
            <v-icon>play_arrow</v-icon>
          </v-btn>
        </div>
        <div v-else>
          <v-dialog
            v-model="media.show"
            persistent
            width="800px"
            :retain-focus="false"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                v-bind="attrs"
                v-on="on"
              >
                <v-icon>mdi-open-in-new</v-icon>
              </v-btn>
            </template>
            <v-card>
              <Video
                :video-url="media.url"
              />
            </v-card>
            <v-card-actions>
              <v-spacer />
              <v-btn
                color="primary"
                text
                @click="media.show = false"
              >
                Close
              </v-btn>
            </v-card-actions>
          </v-dialog>
        </div>
      </v-list-item-action>
    </v-list-item>
  </v-list>

.. and below I have a media array with a combo of audio and video files

media: [
  {
    id: 0,
    title: 'Audio 1',
    url: 'https://mcdn.podbean.com/abc.mp3',
  },
  {
    id: 1,
    title: 'Video 1',
    show: false,
    url: 'https://vimeo.com/347119375'
  },
  {
    id: 2,
    title: 'Audio 2',
    url: url: 'https://mcdn.podbean.com/edf.mp3',
  },
  {
    id: 3,
    title: 'Audio 3',
    url: 'url: 'https://mcdn.podbean.com/ghi.mp3'
  },
  {
    id: 4,
    title: 'Video 2',
    show: false,
    url: 'https://youtu.be/LtpGLNRlwA0'
  }
],

Answer 1

your dialog needs a v-if as well, like this:

<v-dialog
  v-model="media.show"
  v-if="media.show" <-------
  persistent
  width="800px"
  :retain-focus="false"
>

v-if removes the element from your DOM if its false.