Render video Iframe in ionic2


#1

Hi all,
I want render in my app youtube and vimeo video. In the html tag I have an iframe tag. Any ideas?
Thanks to solve this problem. Excuse me for my bad English.
Samuele.


#2

can you share some code of what you have and what you’ve tried?


#3

I have some content with wordpress api. In contest I have an html with Iframe:

<iframe src="https://player.vimeo.com/video/201434912" width="620" height="349" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> but in a page that I render with

In ts file:

this.corpo: any;

this.corpo = "Guarda il video <iframe src="https://player.vimeo.com/video/201434912" width="620" height="349" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> "

in Html File:

 <ion-card-content>      
         <p  [innerHTML]="corpo"></p>
 </ion-card-content>

The video not rendered in Hmtl tag.

Thanks a lot.


#4

It’s because it’s using innerHTML.

If you use Inner-html, the browser will strip out any functionality in the rendered html for security reasons.
So any click events, anchor hrefs, iframes will NOT behave as you expect, for security reasons.


#5

Yes, but the reponse gives me back a string with html tags and if you use innerHTML on the card is not formatted. why?

This is my response:
</div>\n\n<em>Sant’Antò da a barba bianca</em><br />\n<em> Quello delle pagnottelle,</em><br />\n<em> color d’oro e scrocchiarelle</em><br />\n<em> da spartisse tutti assieme</em><br />\n<em> ‘n po’ perù, chi vène vène,</em><br />\n<em> come l’acqua del Signore</em><br />\n<em> quanno a manna giò de còre!</em></p>\n<p><strong>CUPRA MONTANA, 30 gennaio 2017</strong> – Festa grande, festa vera quella di ieri (29 gennaio) ai <em>frati neri</em>. Tanti gli animali domestici portati davanti al sagrato della <strong>chiesa della Romita</strong> dei francescani per la <strong>tradizionale benedizione di Sant’Antonio Abate</strong>. In realtà, l’appuntamento si doveva tenere il 17 gennaio, ma vista la tanta neve e soprattutto le temperature polari, i padri francescani hanno deciso di posticiparla.</p>\n<p>Comunque ciò che davvero conta è il <strong>ritorno sentito alla tradizione</strong> e ai ricordi legati a <strong>Sant’Antonio Abate</strong> e alle sue <em>pagnottelle</em> che chissà perché hanno sempre <strong>un sapore e un gusto particolari</strong>; ricordi di feste trascorse in famiglia, in un’intimità gelosamente custodita. D’altra parte in questo paese, di estrazione campagnola, con gli animali domestici c’è sempre stata una certa dimestichezza.</p>\n<p>E così stamattina, già molto prima della celebrazione eucaristica, davanti al sagrato si è radunata tanta gente e con le persone anche gli animali: cani, gatti, polli e pesciolini (tanto per citare alcune categorie). Insomma, un piccolo zoo domestico che ha rallegrato non poco l’atmosfera, sotto lo sguardo benevolo di Sant’Antonio Abate. In passato era usanza far benedire anche gli animali da soma: dagli asinelli ai cavalli, abbelliti per l&#8217;occasione con nastri.</p>\n<p>Di un fatto in ogni caso siamo certi, conservare la memoria delle tradizioni dove essere un compito e dovere per tutti noi.</p>\n<p><em>foto e video di Cristiana Loccioni</em></p>\n<p><em>foto copertina di Anna Vincenzoni</em></p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class='youtube-player' type='text/html' width='620' height='379' src='http://www.youtube.com/embed/z96NS3CRq4Y?version=3&#038;rel=1&#038;fs=1&#038;autohide=2&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></span></p>\n<p>&nbsp;</p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-official sd-sharing\"><h3 class=\"sd-title\">Condividi</h3><div class=\"sd-content\"><ul><li class=\"share-facebook\"><div class=\"fb-share-button\" data-href=\"http://www.qdmnotizie.it/cupra-montana-santantonio-abate-la-benedizione-degli-animali-ritorno-alla-tradizione-guarda-video/\" data-layout=\"button_count\"></div></li><li class=\"share-end\"></li></ul></div></div></div>",

Any Ideas?


#6

I just worked on this problem myself. I had to use DOMSanitizer. Found the steps here:


#7

I hope anybody reading this thinks very long and very hard about the potential implications of taking arbitrary code from an external source and embedding it as executable. That is a really really dangerous thing to do. Angular sanitizes things for very good reasons, and I think it is very unwise to do such wholesale subversion of that as is being advocated here.


#8

Any sugggestions for an alternative? I haven’t found one in my searches.


#9

Hello, I have tried Arains method and it works for the application I need to build (kind of an ebook reader) but reading the rapropos post really makes me think…
How unsecure will be my app? is there anything I can do to minimize security risks?
I join Arains on the question, is there an alternative to sanitize bypass?

Thanks.