I've recently developed a simple Angular page that extracts an ID (a guid) from the URL and uses it to make an API call. While I have successfully implemented similar pages in the past without any issues, this particular one is presenting challenges with embedding a YouTube video.
Oddly enough, when I print the YouTube URL to the console, it appears perfectly fine. However, after sanitizing it and assigning it to the src property of the iframe embed, the video fails to display. Strangely, if I alter the API description output from {{session?.SessionDescription}} to {{session.SessionDescription}}, the video shows up.
The description text loads regardless of which approach I take. Yet, omitting the question mark results in a console error indicating that the description cannot be loaded, despite being visible on the screen.
I simply aim for both elements to load smoothly without triggering any console errors.
HTML:
<nav class="pure-drawer" data-position="left">
<h1>What is 3D Printing?</h1>
<p>{{session?.SessionDescription}} {{session?.SessionGains}}</p>
</nav>
<div class="pure-pusher-container">
<div class="pure-pusher">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" [src]="vidUrl" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Typescript:
getCurrentSession(){
this.sub = this.route.params.subscribe(params => {
this.id = params['id'];
this._wmapi
.getService("Session/" + this.id)
.then((result) => {
this.session = result;
this.vidUrl = this.sanitizer.bypassSecurityTrustResourceUrl(result.SessionVideo);
this.getSessionResources(this.id);
})
.catch(error => console.log(error));
});
}