[Fixed][1.0.0-beta.10] Youtube iframe not working

ionic-v1
#1

Html:

<div class="video-container" ng-bind-html="mediaIframe"></div>

Javascript:

        if($scope.post.uuid.substr(0, 3) == 'ut_') {
            var videoWidth = bodyWidth - 20;
            var videoUrl = 'http://www.youtube.com/embed/'+$scope.post.uuid.substr(3)+'?rel=0';
            $scope.mediaIframe = '<iframe width="'+videoWidth+'" height="200" src="'+$sce.trustAsResourceUrl(videoUrl)+'" frameborder="0" allowfullscreen> </iframe>';
            console.log($scope.mediaIframe);
        } else {
            $scope.mediaIframe = "";
        }

It ends up only with an empty div. The console goes OK:

<iframe width="300" height="200" src="http://www.youtube.com/embed/BjJpNFRHxKg?rel=0" frameborder="0" allowfullscreen> </iframe>
#2

Hmm, seems like case of CROS. Have you whitelist the url in your config setup?

I learned this the hard way

Error installing cordova plugins
#3

You mean the $sce.trustAsResourceUrl(videoUrl)part?

#4

It’s a bit more detailed than that, but yeah thats the idea

Basically, you need to tell angular that what ever link is being used, to trust it and that you know what it is.

EDIT: reread your original post and see you already have that.

Can you put together a codepen to show what you have?

#5

So, in the end I should use

ng-src={{validUrl()}}

in the html and this method should be something like

$scope.validUrl = function() { return $sce.trustAsResourceUrl(videoUrl); }

So now it is working :smile: