AngularJS - issue when embedding the Youtube video url from directive to script

Question

Here is working code PLUNKER in the controller

public JsonResult videohome()
        {
            BaseController bc = new BaseController();
            var video = (from n in bc.db.Video where n.Video == true select n).FirstOrDefault();
            var videos = new Videohome { youtubeid = "//www.youtube.com/embed/" + video.youtubeid };
            return Json(videos, JsonRequestBehavior.AllowGet);
        }
        public class Videohome
        {
            public string youtubeid { get; set; }
        }

It gives the ouptput as {"youtubeid":"//www.youtube.com/embed/_kux-YQujjM"}

But when i load this output into my script it displays error,

<script>

        countryApp.controller('Homevideo', ['$scope', "$http",'$sce', function (scope, sce, http) {
            http.get('@Url.Content("/sample/videohome")').success(function (data) {
                $scope.video = data;
                $scope.videoUrl = $sce.trustAsResourceUrl($scope.video + $scope.video.youtubeid);
             });
         }]);
</script>
        <div ng-controller="Homevideo" > <br />         
         <iframe width="100%" height="250" ng-src="{{videoUrl}}" frameborder="0" allowfullscreen=""></iframe>
            <p>{{videoUrl}}</p>       
          </div>

Did i missed anything in my code, Any help is appreciated.

you sure what you attached angular.js to your app ?

Narek Mamikonyan
– Narek Mamikonyan

2014-07-25 07:51:03 +00:00
Commented Jul 25, 2014 at 7:51 — Narek Mamikonyan
– Narek Mamikonyan, Commented Jul 25, 2014 at 7:51

ex0ns · Accepted Answer · 2014-07-25 08:08:17Z

1

here is a working version (without the http): http://plnkr.co/edit/6M0qdSNlUe1f7mhT7ASt?p=preview I spotted few errors, first, try to organize the import in the same order and with a '$' prefix :

countryApp.controller('Homevideo', ['$scope', "$http",'$sce', function ($scope, $http, $sce)

The second thing I noticed is $scope.video + $scope.video.youtubeid I think you're not doing it right and $sce.trustAsResourceUrl($scope.video.youtubeid); should be enough as $scope.video is an json array it has nothing to do with the url.

answered Jul 25, 2014 at 8:08

ex0ns

1,1268 silver badges20 bronze badges

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

1 Comment

KesaVan Over a year ago

Excellent, Thanks This code helps for my issue... :)

Collectives™ on Stack Overflow

AngularJS - issue when embedding the Youtube video url from directive to script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related