In this app show, youtube videos embedded in Ionic 3 Application. Application show two methods (iframes, Object) to implement embded videos. DomSanitizer is also implemented for safe Url and Cross-site Scripting (XSS).
<iframe allowscriptaccess="always" [src]="url" frameborder="0" allowfullscreen=""></iframe>
CSS
.embed-video {
width: 100%;
height: 250px;
}
HTML
<object class="embed-video" [data]="url"></object>
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
url;
constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) {
this.getSafeUrl("https://www.youtube.com/embed/S46MFd-JdK4");
}
getSafeUrl(url) {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}