CODEWITHSUNDEEP
javascriptangularjsiframeyoutube
S.C.
S.C.

Reputation: 920

Embed Youtube video in AngularJS generates error when loading the page

The code snippet below is used to embed Youtube video in my page.

<div ng-if="videoUrl != ''" style="height:400px;">
    <iframe width="100%" height="100%" src="{{videoUrl}}"></iframe>
</div>

In my controller, videoUrl is first set to an empty string, and updated once data is retrieved from server.

$scope.videoUrl = '';

videoService.getData().then(function(response) {
    $scope.videoUrl = response.videoUrl;
});

The Youtube player works and the URL is correct, I can watch the video with the embeded player after the page is fully loaded. What bothers me is each time when loading the page, an error is returned. I can see from the browser console that it was trying to send a GET request to http://www.example.com/%7B%7BvideoUrl%7D%7D with its status as (canceled). This request is not something I want and it fails for sure.

How can I get rid of that weird GET request?

Upvotes: 0

Views: 2990

Answers (1)

S.C.
S.C.

Reputation: 920

I modified my code based on RGraham's suggestion and the error is gone now.

First, change src to ng-src and the checking condition to ng-if="videoUrl".

<div ng-if="videoUrl" style="height:400px;">
    <iframe width="100%" height="100%" ng-src="{{videoUrl}}"></iframe>
</div>

Second, I initialize videoUrl to undefined.

$scope.videoUrl = undefined;

Now the page loads without sending the previous weird GET request anymore.

Upvotes: 1

Related Questions