YouTube videos in Modal

[jonfackrell]

Hi,

I was just trying to add a YouTube embedded video in a Modal and it works great except for when the video is playing and the modal is closed. The video continues to play and I have to trigger the modal again to stop the video and re-close the modal.

I have an idea how I might solve this but I'm wondering if anyone else has done something similar or can think of an easy way to stop the video.

[joshhanley]

@jonfackrell close events have just been added to modals, so you could use that to listen to and pause the video https://fluxui.dev/components/modal#close-events

[jonfackrell]

That's perfect. Thanks!

[GuidoVeltmaat]

I am trying this over and over but cant get it to work. How could i actuallly " listen to and pause the video" inside this close event?

[jonfackrell]

Hi @GuidoVeltmaat ,

Here is some simplified code for how I ended up doing it with the Alpine listener x-on:close.

<div x-data="{
        stopVideo(id) {
            var iframe = document.getElementById(id);
            var iframeSrc = iframe.src;
            iframe.src = iframeSrc;
        }
    }">

    <flux:modal.trigger :name="'video-1'y">
        {{ $videoName }}
    </flux:modal.trigger>

    <flux:modal :name="'video-1'"
                  x-on:close="stopVideo('video-1')">
          <iframe id="video-1"
                  src="{{ $videoUrl }}"
                  class="w-full aspect-video"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allowfullscreen></iframe>
      </flux:modal>
</div>

[GuidoVeltmaat]

Thank you @jonfackrell. This helped me alot.