Multiple Videos on one Page -> ngYoutubeEmbedService does not play both videos

[ncalarco]

Having an issue with multiple videos on a page, and with the ability to play the videos via the ngYoutubeEmbed service.

HTML:
<div class="col-md-12 push-20-t no-padding"> <div class="col-md-12"> <div class="block block-rounded"> <ng-youtube-embed video="aboutIfThenVideoURL" videoid="aboutIfThen" width="595px" height="300px" autoplay="false" color="red" enablejsapi="true" disablekb="true"> </ng-youtube-embed> <div class="block-content block-content clearfix"> <div class="pull-right"> <button class="btn btn-sm btn-default" ng-click="playAboutVideo()">Watch now!</button> </div> <div> <p>About IfThen: Overview</p> <p>2:22</p> </div> </div> </div> </div> <div class="col-md-12"> <div class="block block-rounded"> <ng-youtube-embed video="captainInfoVideoURL" videoid="captainInfo" width="595px" height="300px" autoplay="false" color="red" enablejsapi="true" disablekb="true"> </ng-youtube-embed> <div class="block-content block-content clearfix"> <div class="pull-right"> <button class="btn btn-sm btn-default" ng-click="playCaptainVideo()">Watch now!</button> </div> <div> <p>Captain Informational Video</p> <p>3:47</p> </div> </div> </div> </div> </div>

Here is the js:
$scope.playAboutVideo = function() {
var player = ngYoutubeEmbedService.getPlayerById('aboutIfThen');
player.playVideo(); // Play video
};
$scope.playCaptainVideo = function() {
var player1 = ngYoutubeEmbedService.getPlayerById('captainInfo');
player1.playVideo(); // Play video
};

It appears that I am able to find both videos on both button clicks, however, it seems like only one video will play no matter what I try - when I try to play the second video, I get the following error:

TypeError: player.playVideo is not a function

Can you please let me know what I'm missing here? Thanks.

[ArunMichaelDsouza]

Hi, can you please provide a working example, like on codepen or jsfiddle.