Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Steve Turner priority asked 4 months ago


When the modal loses focus the video stops playing

When the modal loses focus the video continues to play

https://mdbootstrap.com/snippets/standard/mdbootstrap/6206158?view=side

  <div class="col-lg-4 mb-4 mb-lg-0">
    <div
      class="bg-image hover-overlay ripple shadow-1-strong rounded"
      data-ripple-color="light"
    >
      <img
        src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp"
        class="w-100"
      />
      <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal2">
        <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
      </a>
    </div>
  </div>

  <div class="col-lg-4 mb-4 mb-lg-0">
    <div
      class="bg-image hover-overlay ripple shadow-1-strong rounded"
      data-ripple-color="light"
    >
      <img
        src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp"
        class="w-100"
      />
      <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal3">
        <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
      </a>
    </div>
  </div>
</div>

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="ratio ratio-16x9">
        <iframe
          src="https://www.youtube.com/embed/wTcNtgA6gHs"
          title="YouTube video"
          allowfullscreen

  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="ratio ratio-16x9">
        <iframe
          src="https://www.youtube.com/embed/vlDzYIIOYmM"
          title="YouTube video"
          allowfullscreen


Grzegorz Bujański staff answered 4 months ago


You need to use YT Api and hide.mdb.modal event. Add ?enablejsapi=1 to each YT video url and then on hide.mdb.modal event pass the pauseVideo or stopVideo command to the iframe

Here you will find a snippet with an example of how to do it: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6208873#js-tab-view


Grzegorz Bujański staff answered 4 months ago


Can you write more about what you want to do? Do you want the video to play automatically when you open the modal and stop when you close the modal?


Steve Turner priority commented 4 months ago

We would like the video to stop playing when you close the modal



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: PC
  • Browser: Firefox,Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags