Video Modal

web
mobile

Aroquiassamy LA ROZE pro premium asked 9 months ago

Expected behavior

While closing modal or clicking outside the modal video has to stop playing the video or it has to go to the pause state.

Actual behavior

The Video continues to play in the background. Even after the modal is closed

Am I doing wrong or your code is wrong whether I have to wait for the entire video to play and then I have to close my modal is this the way? I and my client has to do?

Resources (screenshots, code snippets, etc.)

<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
  mdbWavesEffect>Launch Modal</button>

<div mdbModal #frame="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">

    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body mb-0 p-0">
        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center flex-column flex-md-row">
        <span class="mr-4">Spread the word!</span>
        <div>
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="fb" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
          <!--Twitter-->
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="tw" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
          <!--Google +-->
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="gplus" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="google-plus"></mdb-icon>
          </a>
          <!--Linkedin-->
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="ins" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
          </a>
        </div>
        <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light" mdbWavesEffect data-dismiss="modal"
          (click)="frame.hide()">Close</button>

      </div>

    </div>
    <!--/.Content-->

  </div>
</div>

Damian Gemza staff answered 9 months ago

Dear @Aroquiassamy LA ROZE

Please try the below code which is your code with my changes:

.html:

<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample" (click)="frame.show()"
        mdbWavesEffect>Launch Modal</button>

<div mdbModal (close)="onClose()" #frame="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">

    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body mb-0 p-0">
        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
          <iframe class="embed-responsive-item" #iframe src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
        </div>
      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center flex-column flex-md-row">
        <span class="mr-4">Spread the word!</span>
        <div>
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="fb" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
          <!--Twitter-->
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="tw" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
          <!--Google +-->
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="gplus" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="google-plus"></mdb-icon>
          </a>
          <!--Linkedin-->
          <a type="button" mdbBtn floating="true" size="sm" mdbBtn color="ins" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
          </a>
        </div>
        <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light" mdbWavesEffect data-dismiss="modal"
                (click)="frame.hide()">Close</button>

      </div>

    </div>
    <!--/.Content-->

  </div>
</div>

.ts:

@ViewChild('iframe') iframe: ElementRef;

  constructor(private renderer: Renderer2) {}
  onClose() {
    const src = this.iframe.nativeElement.getAttribute('src');
    this.renderer.setAttribute(this.iframe.nativeElement, 'src', src);
  }

Best Regards,

Damian


Aroquiassamy LA ROZE pro premium answered 9 months ago

Mr.@Damian Gemza

I'm using this video modal for more than 2 projects with 15 models that open with video on each page. So, should I have to go and update on each page. How should this possible and it take too much time for me...Can't you fix and update from your side?


Damian Gemza staff answered 9 months ago

Dear @Aroquiassamy LA ROZE

As I said to you before, there's no possibility to make fixes in MDB 7 version, because we're developing MDB 8.

It's impossible due to our technical structure.

You have to do this on your own. It can be easily done with some service, where you're defining the method for closing videos, and in every page, you have only to use this method.

Best Regards,

Damian


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.5.4
  • Device: Lenova
  • Browser: Chrome 73
  • OS: Windows 10 1803
  • Provided sample code: No
  • Provided link: No