AngularJS使用angular-youtube-mb时ng-show条件为真元素不显示问题

问题原因 #

这个问题核心是ng-show的显隐机制和angular-youtube-mb组件的初始化逻辑冲突导致的：
ng-show是通过CSS的display: none控制元素显隐，页面加载时youtube-video元素已经被创建，只是处于隐藏状态。此时组件初始化无法获取到容器的有效宽高，会默认渲染为0宽0高，即使后续homewelcomeVM.playing变为true让元素显示，组件也不会自动触发重绘适配尺寸，因此视觉上看不到视频，但实际元素已经存在。
你删除ng-show后页面加载时组件就正常初始化，能拿到容器尺寸所以可以正常播放。

解决方案 #

方案1（推荐）：将ng-show替换为ng-if #

修改HTML中youtube-video标签的显隐指令：

<youtube-video ng-if="homewelcomeVM.playing" video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>

ng-if会在变量为true时才创建DOM元素并初始化组件，此时容器处于可见状态，组件可以正常获取宽高完成渲染，完全符合你的需求。

方案2（保留ng-show时使用）：手动触发组件尺寸重绘 #

如果必须保留ng-show，可以在播放事件回调中手动调用播放器的resize方法适配尺寸，修改控制器代码即可：

$scope.$on('youtube.player.playing', function ($event, player) {
    $scope.$applyAsync(() => {
        vm.playing = true;
        vm.paused = false;
        // 手动设置播放器尺寸适配容器
        const videoContainer = document.querySelector('.video');
        player.setSize(videoContainer.clientWidth, videoContainer.clientHeight);
    });
});

内容的提问来源于stack exchange，提问作者Alfredo Asensio