Display youtube other than React way

[ayyash]

I am trying to display a youtube video using Angular, on the sanity doc pages an example of Youtube via react looks great, in Angular, I must at least draw the iframe in the serlaizer... so I had

... youtube: ({node}) => {
    // return <iframe> doesn't work obviosly
    return h('iframe', {src: node.url}); // was completely ignored
}

Any hints?

[ayyash]

You know I have been trying to fix it for two days and just when I logged the question, I found out the answer :/ here it is for anyone speculating...

types: {
youtube: ({node}) => {
 const str = ` <iframe width="560" height="315"
          src="https://www.youtube.com/embed/${node.url}" 
     frameborder="0" 
     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
     allowfullscreen></iframe>`;
     const div = document.createElement('div');
     div.innerHTML = str;
     return div;
}
}

Now in Angular when placing the innerHtml property, you need to sanitize:

// template
<div [innerHtml]="getSanitized(post.body)"></div>

// component
    constructor(
        private sanitizer: DomSanitizer) {
    }
getSanitized(body: string): any {
        return this.sanitizer.bypassSecurityTrustHtml(body);
    }

[rexxars]

Thanks for the updated info! Hopefully we'll have a native angular portable text renderer at some point :)