JavaScript/HTML5/angularjs change value of html tag var

Question

This is my first web ever task, I need to change value "video=" in my iframe from some var.

<ons-page ons-show="updateToolbar('Search'); !isAndroid() && focusInput('ios')" ng-infinite-scroll="loadMore">
  <ons-if class="search-bar" platform="ios other">
    <form ng-submit="search(true); blurInput('ios')">
      <ons-input type="search" class="search-input" input-id="ios-search-input" placeholder="Search for videos in YouTube" ng-model="query"></ons-input>
    </form>
  </ons-if>

  <div class="content">

    <ons-list>
      <ons-list-item tappable ng-repeat="video in results track by $index" ng-click="modal.show(); launch(video, true)">
        <div class="left">
          <img class="thumbnail" ng-src="{{ video.thumbnail }}">
        </div>
        <div class="center">
          <div class="title">
           {{video.id}}
          </div>
         <div class="desc">
            <br>

<iframe style="width:230px;height:60px;border:0;overflow:hidden;" scrolling="no" src="//xxx/widget/button/?video=https://www.youtube.com/watch?v=FX5DhPeT12E
&color=e52d27">  

How to put in src new youtube link? it's my custom player. Youtube id can be retriven by {{video.id}}

Answer 1

You need to use trustSrc

  <iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">

Controller:

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }
  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

DEMO

Answer 2

Try ng-src:

<iframe ng-src="//xxx/widget/button/?video={{video.id}}" />