javascript - 如果 Vimeo 视频未加载，则创建静态图像后备

Question

我试图找出一种在 Vimeo 的服务器关闭的情况下创建静态图像后备的方法。这种情况很少见，但视频是主要元素，被用作主页背景。当它关闭时，它会显示一个带有错误消息的黑屏，并完全摆脱页面设计。

不幸的是，我没有太多将 Vimeo 嵌入网站的经验。有没有办法检测视频是否正确加载/播放，如果没有在其位置显示静态图像？这是在 iframe 中加载的嵌入式视频的现有代码。

<div class="vimeoVideo">
    <iframe src="https://player.vimeo.com/video/---------?byline=0&amp;badge=0&amp;background=1&amp;title=0" style="width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);" allowfullscreen scrolling="no" allow="encrypted-media"></iframe>
</div>

标签： javascripthtmlcssiframevimeo