“隐藏”YouTube 的嵌入式视频旋转圈答案

【问题标题】：“Hide” YouTube's embedded video spinning circle“隐藏”YouTube 的嵌入式视频旋转圈
【发布时间】：2017-05-26 21:08:07
【问题描述】：

我使用 YouTube 视频作为背景。当视频不播放时，该 div 还具有一个图像作为移动设备的背景。

在页面加载时，它会短暂显示图像，然后变成黑色并带有旋转的圆点，然后视频开始播放。

有没有办法用旋转的圆圈跳过/隐藏黑屏？

【问题讨论】：

标签： css iframe youtube

【解决方案1】：

YouTube 坚持使用 iframe，我认为以任何其他方式访问视频都违反了他们的 TOS。如果他们不使用 iframe，您可以将以下 css 应用于出现在您的 DOM 中的元素。

.ytp-spinner { display:none;}
.player-api {background-color: transparent;}
.player-unavailable {background-color: transparent;}
.html5-video-player {background-color: transparent;}
.ytp-gradient-top {background-image: none;}
.typ-gradient-bottom {background-image: none;}

这些位可能会隐藏视频的违规部分（预加载）。

您将不得不尝试其他方法，如果您拥有该视频，我建议您尝试以下方法。

编辑视频，使前约 5-10 秒为静止图像帧。
在加载时使用 javascript 隐藏整个 youtube iframe。
您可以尝试匹配图像，使过渡相当无缝。

您无法控制的变量是用户的加载速度，因此您可能需要进行一些测试才能获得在大多数情况下工作的时间。祝你好运-R

【讨论】：

我认为有很多层带有黑色背景： .player-api .player-unavailable .html5-video-player 在 webtools 中禁用时摆脱黑屏。这是一个开始
看起来可能需要设置 10 层或更多层背景：透明或不透明度：0 或显示：无。我会看看我是否可以在答案中列出更多。