Using the DomSanitizer to Embed YouTube Videos in Ionic 2 / Angular Applications

Everyone’s been there… you’re ready to embed your sweet YouTube clip in your Ionic 2 application, and bam! It doesn’t work. Why?

Before embedding iframes or other potential cross site scripting security flaws, the content has to be sanitised by the DomSanitizer .

You can also find me:

[blydewright]

Great video - short, understandable and thorough. I was able to follow and implement my solution well. Cheers from South Africa!

[almajaz]

very nice video thank you ....im tird this i frame not working ...only showing blank


<iframe [src]="ch.url | youtube" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>

[zeit]

i am nearing a deadline and faced this problem while getting embed youtube video from a JSon file, i watched your video, gonna try it and be back

[prathyushasamudrapu]

thank you so much have been working on this problem for hours and u made it easy for me :)

[Fitlissports]

Thanku so much dude. almost 2 days gone for this.

[sikeward.studios]

Nice video...thank you. I got stuck on this for a while, at the end of your video, the last bit to add for IOS breaks the config.xml and gives an error when you try to platform build....you forgot to close the tag <allow-navigation It should be <allow-navigation href="https://*youtube.com/*" />

[darasat]

Paul good day, first the tutorial is great, is very clear and direct, now I have a question, I want to publish an app in google play, but I am getting this issue "Issue: Violation of Device and Network Abuse policy " the "xml configuration - allow.." will be enough?
cheers!

[redps]

how do i make this works with local html in assets folder please helpTT
im using ionic 2
and stored my html in src/assets/html
and in .ts

when i build the app said file not found while on serve, there were other errors when i checked console(F12)
-not allowed to load local resource

[FieelFlying]

This works and shit but if you ever want to play the video fullscreen it will glitch fullscreen for a second and then go back to your ionic page. Basically fullscreen is not supported. Why?

[SLKSGV]

thanks for the video. How can I do for load any webpage in a WEBVIEW?? Even the blockeds

[icalrenoza]

I have got an error in app.module.ts in import statement.it shows cannot find a module, so please tell me
import {Youtube} from '../pipes/youtube'; but i make it to ../pipes/youtube/youtube still got error.
Can someone help me?

[antoncona]

Hi Paul, Do you have a sample to play video (from YouTube API) with ionic 3?

[pheakra]

Will this work with ionic 3 and how do I implement this with my own api. It shows on my ionic serve -l but on dev app, it didn't show

[mukashwasti]

in ionic 5 i embedded it successfully but video is not playing? i hope you can help

[Bombstic]

Hello Paul,
Your videos are greate but I am having a problem.
Can you hep me in this thing ?

[zohaibahmed]

Thank you Paul a great video, However, I need someone help here, Videos are coming like charm but the problem is I have couple of videos in one page when I play first video and scroll outside and click on the second one it didn't stop or pause the first one so at a time both videos are getting played. Any help will be a life saver. Thanks will be waiting...

[vajidali]

Hello Paul Can you create tutorials for an audio casserole in which play / pass next previous can be done. Thank you

[mahmoudtokura]

This video saved my project.
One if a kind on Youtube, thanks

[camiloandreselguetabasso]

I try this with angular 5 and a base64 image from a rest api, works for me!! thanks a lot!

[marwansalem]

His Paul! Could you please show me how to disappear the play/stop bar?