Question

我使用下面的AngularJS代码嵌入youtube视频，但不知何故，所有菜单和侧边栏div都显示在顶部而无法正常工作。我已经尝试了wmode=transparent和wmode=opaque但没有结果。

我错过了什么？如何解决此z-index问题？

注意：我不使用JQuery。我改用AngularJS。

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');
                }
            });
        }
    };
}]);

这是我得到的输出看起来很好：

<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>

Youtube嵌入wmode =透明不工作

0 个答案: