Angularjs + HTML play youtube on mouse over - html

Question

I want to play a movie once the mouse is hovering over it. Just like facebook.
<div class="col-sm-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/pQIXz-uhjIk">
</iframe>
</div>
</div>
The site is built with angularjs and html.
(Im quite new so please if possible also explain the solution not just paste code)
Br

Answer 1

Build up a solution "like" facebook in this plunker
To dynamically run the player, you'll have to integrate the ifram api.
You have to add this into your index.html
<script src="https://www.youtube.com/iframe_api"></script>
Then you need to handle the asynchronous load of their API (dunno why they did that) like this in your controller:
//i create a promise to wait for the YT.loaded to be true
var defered = $q.defer();
var promise = defered.promise;
//i launch this function until the YT.loaded is true
var interval = $interval(function(){
if(YT.loaded){
//if the YT api is loaded, i cancel the interval and resolve the promise
defered.resolve();
$interval.cancel(interval);
}
})
Now i can create a player when the YT api is ready :
var videoId = "pQIXz-uhjIk";
//when the API is ready
promise.then(function(){
//i create an Iframe player in the div with the "ytplayer" id
$scope.ytplayer = new YT.Player('ytplayer', {
height: '200',
width: '300',
videoId: videoId
}) ;
});
Now i have a full control on the player with the $scope.ytplayer object.
I prepare two function to start and pause a player :
$scope.startPlayer = function(player){
player.playVideo();
};
$scope.pausePlayer = function(player){
player.pauseVideo();
}
Now let see the HTML and the mouse tricks :
<div ng-show="ytplayer" ng-mouseenter="startPlayer(ytplayer)" ng-mouseleave="pausePlayer(ytplayer)" class="embed-responsive embed-responsive-16by9">
<div id="ytplayer"></div>
</div>
I show my div only if ytplayer is set. When i enter the div i run startPlayer() on the player ytplayer. When i leave the div i run pausePlayer() on the ytplayer.
The embed-responsive class is an inline-block to wrap the player
... And that's pretty much all.
Michelem's solutionis probably the best option and easiest option if you only have to start the player on mouseenter. But if you need more control on the player keep in mind my solution (even if it's a bit tricky).
Hope it helped.

Answer 2

This could be a solution you can play with:
JSFiddle
HTML:
<div ng-app="myApp" ng-controller="dummy">
<div class="col-sm-12">
<div class="embed-responsive embed-responsive-16by9">
<div ng-hide="url" ng-mouseenter="url = 'http:////www.youtube.com/embed/pQIXz-uhjIk?autoplay=1'">OVERME</div>
<iframe ng-show="url" class="embed-responsive-item" ng-src="{{trustSrc(url)}}"></iframe>
</div>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', '$sce', function ($scope, $sce) {
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
}
}]);