Youtube embed with wmode=transparent not working

Question

I'm embedding youtube videos using the AngularJS code below but somehow all the menu and sidebar div is showing on top and not working. I have tried both wmode=transparent and wmode=opaque with no result.

What am I missing? How do I fix this z-index issue?

NOTE: I don't use JQuery. I use AngularJS instead.

gmDirectives.directive('gmtYoutube', ['$sce', function($sce) {
    return {
        restrict: 'EA',
        scope: { code:'=' },
        replace: true,
        template: '<div class="TlLinkVid"><iframe ng-src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
        link: function (scope) {
            var extractYoutubeVideoId = function(url) {
                var re = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/i;
                var match = url.match(re);
                return (match && match[1]) || null;
            };
            scope.$watch('code', function (newVal) {
                if (newVal) {
                    scope.url = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + extractYoutubeVideoId(newVal)+'?wmode=transparent');
                }
            });
        }
    };
}]);

This is the output I get which looks fine:

<div class="col-xs-24 TlLinkVid TlLinkVid ng-isolate-scope" gmt-youtube="" code="option.video_url">
    <iframe frameborder="0" allowfullscreen="" ng-src="https://www.youtube.com/embed/hsTq2SDdrtE?wmode=transparent" src="https://www.youtube.com/embed/hsTq2SDdrtE?wmode=transparent"></iframe>
</div>