Display Youtube in Ionic 2 App

Question

I am trying to display a Youtube video in an Ionic 2 app with URLs nested from a JSON data feed.

Individual videos may be displayed when the Youtube URL is set in the designer on the details page, but I need a detailed page to display the video for each of the videos in the JSON channel.

Here's how an individual Youtube video can be displayed in Ionic 2 in detail.ts and detail.html:

1

import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser'; 

2

 videoUrl: SafeResourceUrl; constructor(private domSanitizer: DomSanitizer, public navCtrl: NavController) { this.videoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/DuwXCFyo4-w') } 

3

 <iframe width="100%" height="315" [src]="data.youtube" frameborder="0" allowfullscreen></iframe> 

ios tweak

 <allow-navigation href="https://*youtube.com/*"/> 

What I need is some code tweak in detail.ts to resolve any Youtube url?

Here is Youtube being displayed in Plunker on the details page http://plnkr.co/edit/Ar2whVFCmBAbE7fxA3nf?p=preview

One solution that I saw below, but doesn't seem to work, is:

 transform(videoId: string): SafeResourceUrl { return this.domSanitizer.bypassSecurityTrustResourceUrl( https://www.youtube.com/embed/${videoId}); } 

Answer 1

You are doing it wrong. You should not use YouTube’s inline frames in your ionic app.

You must use the Ionic Youtube Plugin

To install it, go to your Ionic project on the command line:

 ionic plugin add https://github.com/Glitchbone/CordovaYoutubeVideoPlayer.git npm install --save @ionic-native/youtube-video-player 

Main use:

 import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player'; constructor(private youtube: YoutubeVideoPlayer) { } this.youtube.openVideo('myvideoid'); 

Of course, myvideoid is your youtube video identifier passed as a string.

Answer 2

HTML

 <div class="videowrapper"> <iframe [src]="updateVideoUrl(video_id)" frameborder="0" allowfullscreen width="640" height="550" ></iframe> </div> <button (click)="watch_on_youtube(video_id)" ion-button small color="danger"> <ion-icon name="logo-youtube"></ion-icon> Or Watch On Youtube </button> 

TypeScript:

 import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player'; @Component({ selector: 'page-video-single', templateUrl: 'video-single.html', }) export class VideoSinglePage { video_id: any; constructor( public sanitizer: DomSanitizer, public youtube: YoutubeVideoPlayer ) { this.video_id = 'your_video_id'; } ionViewDidLoad() { console.log('ionViewDidLoad VideoSinglePage'); } updateVideoUrl(id: string) { // Appending an ID to a YouTube URL is safe. // Always make sure to construct SafeValue objects as // close as possible to the input data, so // that it easier to check if the value is safe. let dangerousVideoUrl = 'https://www.youtube.com/embed/' + id + '?rel=0&showinfo=0'; return this.sanitizer.bypassSecurityTrustResourceUrl(dangerousVideoUrl); } watch_on_youtube( video_id ) { this.youtube.openVideo( video_id ); } } 

CSS (for adaptive video embedding):

 page-video-single { .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; background-color: #000000; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }