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}); } 1 Answers
Answers 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.
0 comments:
Post a Comment