angular .module('degreedPublic') .directive('dgWatchVideo', function ($timeout, $rootScope, $compile, $sce) { var template = '
'; return { restrict: 'A', scope: { dgWatchVideo: '@', autoplay: '@', pinTop: '@', }, link: function (scope, el, attrs) { var videoSrc = $sce.trustAsResourceUrl(scope.dgWatchVideo); var autoplay = ''; scope.videoVM = { isOpen: false, closing: false, }; el.on('click', function () { scope.open(); }); scope.videoVM.close = function ($event) { $timeout(function () { scope.videoVM.isOpen = false; scope.videoVM.isClosing = true; if (scope.pinTop) { $('html,body').removeClass('no-scroll'); } }, 0); $timeout(function () { scope.videoVM.isClosing = false; $('.iframecontainer iframe').remove(); }, 600); $event.stopPropagation(); $rootScope.$emit('video.closed'); }; var content = $compile(template)(scope); el.after(content); // works with YouTube and Vimeo if (scope.autoplay === 'true') { autoplay = '?autoplay=1'; } scope.open = function () { if (!scope.videoVM.isOpen) { scope.videoVM.isOpen = true; // find only the next iframe container instead of all on page el.next() .find('.iframecontainer') .html( '' ); if (scope.pinTop) { $timeout(function () { $('html,body').addClass('no-scroll'); }, 600); } $rootScope.$emit('video.opened'); } }; }, }; }) .controller('WatchVideoCtrl', function ($scope) { $scope.openVideo = function ($event, id) { if ( '#' + $($event.target).attr('id') !== id && $($event.target).attr('id') !== 'videowrapper' ) { $(id).scope().$parent.open(); $event.stopPropagation(); } }; });