Video Modal

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

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?

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