JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app">
  <div class="container-info">
    <ul class="trailers">
      <li><a href="#" ng-click="videoid = 'ePbKGoIGAXY'">ePbKGoIGAXY</a></li>
      <li><a href="#" ng-click="videoid = 'KlyknsTJk0w'">KlyknsTJk0w</a></li>
    </ul>
    <div class="container-trailers">
      <youtube videoid="videoid"></youtube>
    </div>
  </div>
</div>

CSS

li a {
  background-color: red !important;
  border: 1px solid red !important;
}

li a:before {
  border-left-color: red !important;
}

.green {
  background-color: green !important;
}

JavaScript

var app = angular.module("app", []);
app.directive('youtube', function($window) {
  return {
    restrict: "E",
    scope: {
      videoid: "="
    },
    template: '<div></div>',
    link: function(scope, element, attrs, $rootScope) {
      scope.$watch('videoid', function (newVal, oldVal) {
        console.log(newVal);
      });
    }
  };
});