javascript - Angular JS Force iframe to reload -

i'm making application, , have different videos in same page, don't wanna run different videos in same time, want when user play videos should reload other iframes (so videos stop automatically) ?

is there anyway manipulate iframe controller , if can provide simple example or thing can solve problem wich have been working on more 2 days.

controller :

function myctrl($scope) {     $scope.video1 = 'https://www.youtube.com/embed/wsxwjj88vko';     $scope.video2 = 'https://www.youtube.com/embed/fvxajf9alpm'; } 

html :

<div ng-controller="myctrl"> <iframe  ng-src="{{video1}}" width="400" height="300" frameborder="0" allowfullscreen></iframe>     <iframe  ng-src="{{video2}}" width="400" height="300" frameborder="0" allowfullscreen></iframe> </div> 

jsfiddle

or way force reloading button example :

 $scope.reload = function() {    $scope.video1 = 'https://www.youtube.com/embed/wsxwjj88vko';     };   

example refresh directive

csapp.directive('csreloadon', ['$timeout', function ($timeout) {  var gettemplate = function () {     return '<div ng-if="dorefreshpageonmodechange"><div ng-transclude=""></div></div>'; };  var linkfunction = function (scope, element, attrs) {     scope.dorefreshpageonmodechange = true;      scope.$watch(attrs.csreloadon, function (newval, oldval) {         if (newval === oldval) return;         scope.dorefreshpageonmodechange = false;         $timeout(function () { scope.dorefreshpageonmodechange = true; }, 100);     }); };  return {     restrict: 'ae',     transclude: true,     template: gettemplate,     link: linkfunction }; }]); 

how use it

     <div cs-reload-on="somevar">              ----- contents reload ----      </div>