CODEWITHSUNDEEP
htmljsonangularjsyoutubeangularjs-directive
KesaVan
KesaVan

Reputation: 1031

AngularJS - issue when embedding the Youtube video url with directive

I am trying to Embed the url link from a Json to angularJs.

Now i have the {{video.youtubeid}} with the output in Json controller has _kux-YQujjM

But when i use to call this function inside <iframe>, it is not working.

when i use this function inside P tag it show the output as _kux-YQujjM

This is my code used with iframe tag.

<iframe width="100%" height="250" src="//www.youtube.com/embed/{{video.youtubeid}}" frameborder="0" allowfullscreen=""></iframe>

Whether i missed anything in my code or Is there any way to get the url to connect with this link.

Any help will be Appreciated.

Upvotes: 2

Views: 6050

Answers (2)

maurycy
maurycy

Reputation: 8465

It's beceuse of SCE that don't allow you for constructs like 'something{{myModelValue}}' although you should configure SCE to allow youtube access

.config(function($sceDelegateProvider) {
   $sceDelegateProvider.resourceUrlWhitelist([
     'self',
     '*://www.youtube.com/**'
   ]);
 });

here is a working plunker http://plnkr.co/edit/PZXy6RyiWo60KcIyYh5n?p=preview

Upvotes: 4

Michael Kang
Michael Kang

Reputation: 52867

Use ng-src:

<iframe width="100%" height="250" ng-src="http://www.youtube.com/embed/{{video.youtubeid}}" />

Upvotes: 0

Related Questions