Embed Youtube video in AngularJS generates error when loading the page

Question

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?

I would imagine that when the DOM is rendered, $scope.videoUrl is not actually empty, but undefined. Try using a falsey test instead: ng-if="videoUrl". Also, you might need to use ng-src rather than simply src. Have a look at this answer — CodingIntrigue
– CodingIntrigue, Commented Feb 2, 2015 at 8:38
Thanks, your suggestion works. Would you post an answer for this question? — S.C.
– S.C., Commented Feb 2, 2015 at 8:49
It's better if you post your own answer, you'll know exactly what you changed and what references you used :) — CodingIntrigue
– CodingIntrigue, Commented Feb 2, 2015 at 8:50

S.C. · Accepted Answer · 2015-02-02 09:09:10Z

1

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.

answered Feb 2, 2015 at 9:09

S.C.

9302 gold badges16 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Embed Youtube video in AngularJS generates error when loading the page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related