show angular variable in iframe

Asked

Viewed 703 times

1

Hello, I have a youtube iframe and I have to pass to it i video ID, which is saved in the database, for this I am using an angular variable, as follows:

<iframe width="100%" height="650px" src="https://www.youtube.com/embed/{{institucional.video}}" frameborder="0" allowfullscreen></iframe>

The problem is that it gives interpolation error: This error occurs when Interpolation fails due to some Exception.

With the codes below it simply does not appear ng-src when I have element inspected

<iframe width="100%" height="650px" ng-src="{{trustSrc('https://www.youtube.com/embed/' + vm.video)}}" frameborder="0" allowfullscreen></iframe>

vm.Institucional = function () {
        InstitucionalService.buscaInstitucional().then(function (response) {
            if (response.data != 0) {
                vm.mostraInstitucional = response.data;
                vm.video = $sce.trustAsResourceUrl(response.data[0].video);
            } else {
                vm.mostraInstitucional = '';
            }
        }, function (error) {
            console.error(error);
        });
    }
jquery angularjs iframe

  • Why don’t you make it render everything in one process just...? It will work.

2 answers

1


use a combination of ng-src with the permission of the source in the ombudsman $sce. Functional example to follow:

var app = angular.module('sampleApp', []);

app.controller('SampleController', function ($scope, $sce, $http) {
  
$scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }  


  $scope.videoId ='dQw4w9WgXcQ';
  
  
});
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.js"></script>
<div ng-app="sampleApp">

  <div ng-controller="SampleController">
    
    Video: <input type='text' ng-model='videoId'>
    
    
    <iframe title="YouTube video player" class="youtube-player" type="text/html" 
width="640" height="390" ng-src="{{trustSrc('https://www.youtube.com/embed/' + videoId)}}"
frameborder="0" allowFullScreen></iframe>

  </div>
</div>

Source.

  • it was the first thing I tried, but it doesn’t work, it makes the same mistake

  • @Bernardokowacic example changed, make sure it works for you.

  • It didn’t work for me. I’ll post my function in the controller and the way I’m calling in the iframe there in the question

  • @Bernardokowacic curiosity - it works if you click 'Run code snippet' ?

  • yes, it works..

  • Its problem is interpolation (https://www.youtube.com/embed/{institutional.video}}). note that in my example the function is called directly.

  • worked out now, vlw

Show 2 more comments

1

You cannot concatenate the URL within the source attribute for security reasons: you must concatenate the Javascript URL into a scope for example a urlVideo variable and then ng-src = {{urlVideo}} . Read more here.

See if (SCE) is enabled, in the v1.2 version of angular, SCE is active by default, you need to have a white list of Urls. Read more here and here .

Browser other questions tagged jquery angularjs iframe

You are not signed in. Login or sign up in order to post.