ionic-angular@2.0.0-beta.10 iframe with youtube video not working anymore

[elineopsommer]

Short description of the problem:

If you start a new ionic project with the tabs-template (includes beta.10), then the video in the iframe won't work anymore

What behavior are you expecting?

Correct behaviour of the iframe.

Steps to reproduce:

1. ionic start MyIonic2Project --v2
2. place <div class="newsItemContent" [innerHTML]="content"> in the home.html
3. place following code in the home.ts

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding class="home">
    <div class="newsItemContent" [innerHTML]="content"></div>
</ion-content>

@Component({
    templateUrl: 'build/pages/home/home.html'
}) export class HomePage {
    private content:string;

    constructor(private navController:NavController) {
        this.content = '<iframe class="youtube-player"  title="ePQUMgVnTRs" src="https://www.youtube.com/embed/ePQUMgVnTRs?wmode=opaque&modestbranding=1&autohide=1&controls=1&showinfo=0&color=red&vq=hd720" frameborder="0" allowfullscreen>Video van ePQUMgVnTRs</iframe>';

    }
}

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello! Thanks for opening an issue with us. What platforms are you seeing this issue on?

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[elineopsommer]

I was travelling, sorry for the late answer, but i see this issue in the browser, ios and android, so the issue still exists.

[harikrishna266]

I am having this issue on ios platform, android works fine.
I am using the following ionic2 beta 10.

//this is how i format my youtube url.
return video = this.sanitizer.bypassSecurityTrustResourceUrl(videourl);

//this is how i put iframe
<iframe [src]="video" ></iframe>

//error that i get on chrome console.
browser_adapter.js:69 GET http://localhost:8100/[object%20Object] 404 (Not Found)

Following are the dependancies
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"es6-shim": "0.35.0",
"ionic-angular": "2.0.0-beta.8",
"ionic-native": "1.2.4",
"ionicons": "3.0.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"

Can this be fixed using beta10?

[elineopsommer]

@jgw96 I still have this issue in beta11. Can this still be fixed?

[harikrishna266]

It worked when i added the below line in config.xml.
<allow-navigation href="https://*youtube.com/*"/>
@elineopsommer could you try this ?

[elineopsommer]

@harikrishna266 which line do I have to add?

[harikrishna266]

@elineopsommer i updated my previous comment .Please check

[elineopsommer]

No that doesn't work with me on iOS and Android..

[harikrishna266]

this is the full code that worked for me

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

controller.ts

import {DomSanitizationService} from '@angular/platform-browser'

constructor(private sanitizer: DomSanitizationService) {}

sanitizeUrl() {
this.video = this.sanitizer.bypassSecurityTrustResourceUrl(video);
}

view.html

<iframe width="560" height="315" [src]="video" frameborder="0" allowfullscreen></iframe>