我有一个SveltKit项目，部署到Vercel，其中一个页面中嵌入了一些视频。
没有什么花哨的只是：
<iframe class="player-ratio" src="https://www.youtube.com/embed/video_link" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
这在本地工作，当我运行yarn run build && yarn run preview来查看网站的生产版本时也能工作。
然而，当实际部署在大多数浏览器上时，这就是实际呈现的内容：
<iframe class="player-ratio" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" data-src="https://www.youtube.com/embed/video_link" data-categories="performance" data-autoblocked="1">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
因此iFrame正在渲染，但从YouTube返回的内容是一个空的HTML页面。我有另一个关于Vimeo的视频，同样的问题。几个小时后，视频确实会出现在我面前，但如果我查看另一个浏览器或隐姓埋名，问题仍然存在。我相信其他用户也是如此。
我不确定这是Vercel的东西，还是Svelte或Youtube的东西。任何指向正确方向的指针都将不胜感激。
我仍然不能100%确定根本原因，但据我所知，这是我的SSR网站的一个问题，该组件在页面加载之前就已经呈现，YouTube不喜欢这样。
我通过使用vanilla-lazyloadNPM包显式延迟加载iFrame解决了这个问题。
import lazyload from 'vanilla-lazyload';
let lazyLoadInstance;
onMount(() => {
lazyloadInstance = new lazyload();
}
...
<iframe class="lazy player-ratio" src="" data-src="link" frameborder="0" title="Vimeo player" />
请注意，vanilla-lazyload要求src为空，您将视频的源放在data-src中。