Displaying Youtube within an Ionic 2 app

Question

I am trying to display Youtube videos within an Ionic 2 application, with the URLs pulled in from a JSON data feed.

Individual videos can be displayed when the Youtube url is set in the constructor on the detail page, but I need the detail page to display videos for each of the videos in the JSON feed.

Here is how an individual Youtube video is able to display in Ionic 2 within 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 tweaking in detail.ts to allow any Youtube url?

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

One solution I have seen is below, but can't seem to get it working:

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

Answer 1

You are doing it wrong. You shouldn't be using embedded youtube frames on your ionic app.

You must use the Ionic Youtube Plugin

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

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

Basic Usage:

import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';

constructor(private youtube: YoutubeVideoPlayer) { }

this.youtube.openVideo('myvideoid');

Of course 'myvideoid' is your youtube video ID 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's 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 Responsive 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%;
    }
}