title: Angular - how to play a youtube video on click
body: <p>I have an overlay over iframe and I want to make it so that when a user clicks on that iframe overlay video starts playing. Since that page is where I list all the articles I have more iframes, so I should pick the one from that element and then play it. How can I do that in Angular, what should I do in my controller when the click event happens?</p>
  
  <p>This is my html:</p>
  
  <pre><code>          &lt;div class="iframe" ng-show="article.external_media.length &gt; 0 &amp;&amp; article.external_media.url != ''"&gt;
              &lt;iframe ng-src="{{article.external_media[0].url | safeUrl }} "&gt;&lt;/iframe&gt;
              &lt;div class="article-image-link"&gt;
                &lt;h1&gt;{{ article.title.split(' ', 7).join(' ') }}&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="iframe-overlay" ng-click="playVideo()"&gt;&lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>I have tried a suggestion where I don't need to use the Youtube API, but the video was not being played. This is my code:</p>
  
  <pre><code>          &lt;div class="iframe" ng-show="article.external_media.length &gt; 0 &amp;&amp; article.external_media.url != ''"&gt;
              &lt;iframe ng-if="!hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&amp;controls=0&amp;showinfo=0' | safeUrl }}"&gt;&lt;/iframe&gt;
              &lt;iframe ng-if="hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&amp;autoplay=1' | safeUrl }} "&gt;&lt;/iframe&gt;
              &lt;div class="article-image-link"&gt;
                &lt;h1 ng-hide="videoPlaying[$index]"&gt;{{ article.title.split(' ', 7).join(' ') }}&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="iframe-overlay" ng-click="playVideo($index)"&gt;&lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>My controller:</p>
  
  <pre><code>  $scope.playVideo = function(index) {
      $scope.videoPlaying[index] = true;
      $scope.hasOverlayBeenClicked = true;
    };
  </code></pre>