JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery.min.js">


</script>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<title>AngularJs</title>

<body ng-app='app'>
  <div ng-controller="Ctrl">
    <button ng-click="open()">Link</button>
    <div youtube-iframe videoid="videoId"></div>
  </div>
</body>

JavaScript

var app = angular.module('app', [])
app.controller('Ctrl', function($scope, $window) {
  $scope.videoId = 'Hl3aJms0xGQ';

  $scope.open = function() {
    $window.open('https://www.google.com', 'google', 'width=500,height=500')
  }

});
app.directive('youtubeIframe', function($sce) {
  return {
    restrict: 'EA',
    scope: {
      videoid: '='
    },
    replace: true,
    template: '<div style="height:400px;"><iframe width="420" height="315" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function(scope) {
      scope.$watch('videoid', function(value) {
        if (value) {
          scope.url = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + value);
        }
      });
    }
  };
});