Ionic-framework: [email protected] iframe with youtube video not working anymore

Created on 8 Jul 2016  路  12Comments  路  Source: ionic-team/ionic-framework

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
    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

reply
Source
picture elineopsommer

Most helpful comment

the problem is that i just drop html of an article which contains sometimes an iframe with an video inside, in a div-tag. I don't touch the content so this isn't possible.

picture elineopsommer on 29 Sep 2016
👍2

All 12 comments

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

jgw96 picture jgw96 on 8 Jul 2016

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!

jgw96 picture jgw96 on 12 Jul 2016
👍1

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

elineopsommer picture elineopsommer on 12 Jul 2016

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