title: How to play youtube video using angularjs
body: <p>All the following code is work successfully to get youtube playlist and display it with no problem. But I can't play any video from this list using angular js. </p>
  
  <p><b>Angular JS</b>   </p>
  
  <pre><code>   var app = angular.module("myApp", []);
     app.controller("myCtrl", function ($scope, $http) {
         //contentDetails - snippet
  
         $http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&amp;maxResults=50&amp;playlistId=PLlMsyZB0poTDYImmOliKyiC-jpAFUsr6X&amp;key=AIzaSyDGm1uzuqPPUGzG-qN7u6gTaS8ApXBJYvw')
              .then(function (response) {
                  $scope.records = response.data.items;
              });
  
         $scope.PlayFun = function (Val) {
             var Vid_ID = Val;
             var New_Vid = "&lt;iframe width='450' height='283' src='https://www.youtube.com/embed/" + Vid_ID + "?autoplay=1&amp;loop=1&amp;rel=0&amp;wmode=transparent' frameborder='0' allowfullscreen wmode='Opaque'&gt;&lt;/iframe&gt;";
             var Vid_Elm = document.getElementById("video");
  
             Vid_Elm.setAttribute("crs", New_Vid);
  
         };
  
     });
  </code></pre>
  
  <p><b>HTML</b>    </p>
  
  <pre><code>    &lt;iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
      &lt;br /&gt;
  
      &lt;ul data-ng-app="myApp" data-ng-controller="myCtrl"&gt;
          &lt;li data-ng-repeat="x in records"&gt;
                      &lt;img class="img-thumbnail" style="width:100px; height:80px;" 
                      src="{{x.snippet.thumbnails.default.url}}" /&gt;
              &lt;br /&gt;
  
              &lt;input data-ng-click="PlayFun(x.snippet.resourceId.videoId)" type="button" value="{{x.snippet.title}}" /&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>My problem specifically is in "$scope.PlayFun" where I can't run a video from the list by video id using angular js. 
  My approach is to change iframe html on ng-click to pass new selected Vid_ID and to make it "autoplay=1" put it doesn't work.</p>