Modal Youtube

Dear @aganeto

The modal is launched by this piece of code after clicking on the button (click)="frame.show(), where frame is the template reference to the div with mdbModal directive.

About your question - you have to dynamically change the video URL with the typescript code.

Please take a look at the below code:

.html:

<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
        (click)="frame.show()" (mouseup)="videoSource = 'https://www.youtube.com/embed/KKi7gMVpPUA'"
        mdbWavesEffect>Video 1
</button>

<button type="button" mdbBtn color="primary" class="waves-light" data-toggle="modal" data-target="#basicExample"
        (click)="frame.show()" (mouseup)="videoSource = 'https://www.youtube.com/embed/A3PDXmYoF5U'"
        mdbWavesEffect>Video 2
</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" [attr.src]="getEmbedUrl()"
                  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" class="btn-fb waves-light" mdbWavesEffect>
            <i class="fab fa-facebook-f"></i>
          </a>
          <!--Twitter-->
          <a type="button" mdbBtn floating="true" size="sm" class="btn-tw waves-light" mdbWavesEffect>
            <i class="fab fa-twitter"></i>
          </a>
          <!--Google +-->
          <a type="button" mdbBtn floating="true" size="sm" class="btn-gplus waves-light" mdbWavesEffect>
            <i class="fab fa-google-plus"></i>
          </a>
          <!--Linkedin-->
          <a type="button" mdbBtn floating="true" size="sm" class="btn-ins waves-light" mdbWavesEffect>
            <i class="fab fa-linkedin-in"></i>
          </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:

 videoSource = 'https://www.youtube.com/embed/A3PDXmYoF5U';

  constructor(private sanitizer: DomSanitizer) {
  }
  getEmbedUrl() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.videoSource);
  }

Best Regards,

Damian

This problem will be resolved in the next version of MDB Angular (which should be available on July 22).