CODEWITHSUNDEEP
javascriptangularjs
Kyle Hawk
Kyle Hawk

Reputation: 449

AngularJS White Listing YouTube URL For Iframe

App.js:

(function() {
    var app = angular.module("RandomAnimeApp", []).config(function($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([
            'self',
            '*://www.youtube.com/**'
        ]);
    });
}());

Controller:

(function() {
    var app = angular.module("RandomAnimeApp");

    var ListController = function($scope, $http, $window, $timeout, $sce) {
        //stuff and things
    };

    app.controller("ListController", ["$scope", "$http", "$window", "$timeout", "$sce", ListController])
}());

View:

<iframe itemprop="trailer" src="about:blank" data-ng-src="https://www.youtube.com/embed/{{ a.source }}?wmode=opaque&amp;showinfo=0&amp;autohide=1&amp;rel=0&amp;iv_load_policy=3&amp;enablejsapi=1"></iframe>

Where a.source is equal to a YouTube video Id.

No matter what I try, I keep getting the "Error: $interpolate:noconcat Multiple Expressions" error for the iframe. What am I missing?

Exact Error Url: https://docs.angularjs.org/error/$interpolate/noconcat?p0=https:%2F%2Fwww.youtube.com%2Fembed%2F%7B%7B%20a.source%20%7D%7D%3Fwmode%3Dopaque%26showinfo%3D0%26autohide%3D1%26rel%3D0%26iv_load_policy%3D3%26enablejsapi%3D1

Upvotes: 1

Views: 94

Answers (2)

Varun Sukheja
Varun Sukheja

Reputation: 6526

Use data-ng-src as shown below:

data-ng-src="{{'https://www.youtube.com/embed/+a.source+'?wmode=opaque&amp;showinfo=0&amp;autohide=1&amp;rel=0&amp;iv_load_policy=3&amp;enablejsapi=1'"

Check for running Plunk here :

Plunk DEMO

Upvotes: 1

Rohit Kumar
Rohit Kumar

Reputation: 1792

Because the SCE filter doesn't get applied on the views. Hence the interpolate error

Here is the 2 Lines of Code on plunkr ...

var videoUrl = 'https://www.youtube.com/watch?v=bs_Lv7EeoZQ';
        videoUrl = videoUrl.replace("watch?v=", "embed/");
       $scope.videoUrl = $sce.trustAsResourceUrl(videoUrl)

Works Every Time :)

Upvotes: 1

Related Questions