Angular - how to play a youtube video on click

Question

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?

This is my html:

          <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
            <iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
            <div class="article-image-link">
              <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
            </div>
            <div class="iframe-overlay" ng-click="playVideo()"></div>
          </div>

Update

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:

          <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
            <iframe ng-if="!hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&controls=0&showinfo=0' | safeUrl }}"></iframe>
            <iframe ng-if="hasOverlayBeenClicked" ng-src="{{article.external_media[0].url + '&autoplay=1' | safeUrl }} "></iframe>
            <div class="article-image-link">
              <h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
            </div>
            <div class="iframe-overlay" ng-click="playVideo($index)"></div>
          </div>

My controller:

  $scope.playVideo = function(index) {
    $scope.videoPlaying[index] = true;
    $scope.hasOverlayBeenClicked = true;
  };

score 0 · Answer 1 · answered Aug 10 '16 at 08:47

Based on article below mention, if we want to control youtube action like play and stop we need to use youtube api then we can control it by using JS.

https://developers.google.com/youtube/iframe_api_reference

or you can use some ready made lib like.

https://github.com/brandly/angular-youtube-embed

Or you create custom directive which internally uses youtube api.

http://blog.oxrud.com/posts/creating-youtube-directive/

Dan M. CISSOKHO · Answer 2 · 2016-08-10T14:16:40.910

0

you could do something like this :

on init

$scope.videoSrc = article.external_media[0].url;

and on click

element.bind("click", function(){
  $scope.videoSrc = article.external_media[0].url + "&autoplay=1";
});

and then on html

<iframe ng-src="{{videoSrc | safeUrl }} "></iframe>

edited Aug 10 '16 at 14:16

answered Aug 10 '16 at 08:48

Dan M. CISSOKHO

1,070
1
12
27

if you could be kind enough to show me on an example how to achieve that with the Youtube API, do I need to make a request to api or can I avoid that for just playing the video? – Ludwig Aug 10 '16 at 14:00

score 0 · Answer 3 · edited May 23 '17 at 12:00

The simplest solution, which doesn't involve using the YouTube API would be to autoplay the video and remove the <iframe /> from the DOM tree until the user clicks the overlay.

E.g.:

      <div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
        <iframe ng-if='hasOverlayBeenClicked' ng-src="{{article.external_media[0].url + '?autoplay=1' | safeUrl }} "></iframe>
        <div class="article-image-link">
          <h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
        </div>
        <div class="iframe-overlay" ng-click="playVideo()"></div>
      </div>

and somewhere in your controller:

$scope.playVideo = function() {
  // ...
  $scope.hasOverlayBeenClicked = true;
}

YouTube Iframe embed auto play @ StackOverflow

I have tried your solution but video is not being played. I have updated my question with your suggestion. — Ludwig, Aug 10 '16 at 11:47

Angular - how to play a youtube video on click

3 Answers3