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}}

Sajeetharan · Accepted Answer · 2016-12-02 04:59:48Z

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

answered Dec 2, 2016 at 4:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

ramzixp Over a year ago

It's no problem for me to load single constant src. Problem is when I have to load exactly this what I have in my variable video.id

Kyle Lin · Accepted Answer · 2016-12-02 04:40:52Z

1

Try ng-src:

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

answered Dec 2, 2016 at 4:40

Kyle Lin

8698 silver badges18 bronze badges

1 Comment

ramzixp Over a year ago

Yeah, i tried it before. Maybe it's some API limit but when I try it, it ruins my search completly. Nothing see then on results list. Weird, this iframe should be separated from rest of code. I'm nooby with web things :) but thx for help

Collectives™ on Stack Overflow

JavaScript/HTML5/angularjs change value of html tag var

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related