4

I am working on a movie website and now on a section with trailers. I have grabbed 3 video documents from the youtube api and already displayed their thumbnails and set their id attribute to the id of the video on youtube.com.

Now, when I click the thumbnail title I would like to open a modal window that shows the youtube trailer of the movie I chose. I do this by grabbing the video ID and placing it dynamically inside the iframe element below (this element is needed to embed youtube videos). Unfortunately this doesn't seem to work.

<iframe width="560" height="315" src="{{link of youtube video gets inserted here after I click on one of the trailer buttons}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

What it shows me is an empty modal and the below error. Does anyone know how to fix this?

Error:unsafe value used in a resource URL context

So this is what the modal looks like: it shows an empty modal instead of a youtube video of the link I clicked.

enter image description here

HTML file: here I insert the embedLink (url) variable from the component in the iframe element that I need to embed a Youtube video

<div class="col-md-8 col-md-offset-2">
<h5>Welcome to MovieMeter! <span *ngIf="isLoggedIn"> You are logged in as {{fullName}}</span></h5>
    <br>
        <h3>Trailers:</h3>
        <hr>
        <ul>
            <li *ngFor="let trailer of trailers">
                <img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope">
                <div id="{{trailer.body.items[0].id.videoId}}" #trailerTitle (click)="openModal(modal, trailerTitle.id)" class="trailerTitle"><h5>{{trailer.movie.title}}</h5></div>
            </li>
        </ul>
    <app-cinema-featured></app-cinema-featured>
</div>


<!-- The Modal -->
<div #modal id="myModal" class="modal">

    <!-- Modal content -->
    <div #modalContent class="modal-content">
        <span (click)="closeModal(modal)" class="close">&times;</span>
        <iframe width="560" height="315" src="{{embedLink}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

</div>

Component: here in the openModal() method I make the dynamic youtube URL and then assign it to the embedlink variable

export class HomeComponent implements OnInit {

    trailers;
    embedLink = null;

    constructor(private modalService:NgbModal, private authService: AuthService, private movieService: MovieService){}

    ngOnInit(){

        // get the thumbnails and links of the three most recent movie trailers via the youtube API
        this.movieService.getTrailers()
            .subscribe(trailers => {
                this.trailers = trailers.result;
                console.log(this.trailers);
            })
    }


    openModal(modal, id){
        this.embedLink = 'https://www.youtube.com/embed/' + id;
        modal.style.display = "block";
    }

    closeModal(modal){
        modal.style.display = "none";
    }
}
tilly
  • 2,229
  • 9
  • 34
  • 64
  • Maybe this method will help you https://stackoverflow.com/questions/37927657/unsafe-value-used-in-a-resource-url-context-with-angular-2 – Konrad Feb 25 '18 at 14:06
  • 1
    Also specific to your problem: https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception/38037914 – Konrad Feb 25 '18 at 14:07

1 Answers1

2

Here you have to do a little more work. You have to pass your URL in bypassSecurityTrustResourceUrl then you can add and play the video.

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  
  constructor (public sanitizer:DomSanitizer) {

   this.url = this.sanitizer.bypassSecurityTrustResourceUrl(yourfinalURL);

In your case pass this.embedLink in the method for final URL to bind-

   this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.embedLink);
Sunny
  • 1,286
  • 12
  • 16