如何快速加载YouTube嵌入内容，同时在手机上保持一键播放？

Question

如this answer中所述的嵌入Labnol的代码，只需单击两次即可播放来自手机的嵌入式视频，就像Labnol从一开始就阐明的那样。

是否有另一个解决方案可以同时实现这两个目标：

1. 一键播放用户体验
2. 嵌入视频的网页加载速度最快

在theguardian.com website上嵌入YouTube似乎可以实现这一点，例如this中的示例：

页面加载后，您不会看到默认的YT播放器，而是看到带有红色播放图标的封面。单击缩略图上的任意位置后，视频将立即播放-而不是仅移除盖子，而是显示YT播放器，您必须从中再次单击“播放”按钮。

什么代码可以达到相同的目的？这是他们在页面上使用的代码：

    <div data-media-atom-id="29a2a152-66e2-47b8-be0e-9da8336ecfa3" class="u-responsive-ratio u-responsive-ratio--hd youtube-media-atom" data-end-slate="/video/end-slate/section/world.json?shortUrl=https://gu.com/p/95a3f" data-unique-atom-id="29a2a152-66e2-47b8-be0e-9da8336ecfa3/0">
<iframe id="youtube-4USNqImit7w" data-asset-id="4USNqImit7w" class="youtube-media-atom__iframe youtube__video-ready" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/4USNqImit7w?rel=0&amp;showinfo=0&amp;embed_config=%7B%22adsConfig%22%3A%7B%22nonPersonalizedAd%22%3Afalse%7D%7D&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.theguardian.com&amp;widgetid=1"></iframe>
<div class="vjs-big-play-button youtube-media-atom__overlay" style="background-image: url(https://i.guim.co.uk/img/media/2424c0e0c381810c343a342388ed374218068b83/0_270_5184_2916/5184.jpg?w=700&amp;h=394&amp;q=55&amp;auto=format&amp;usm=12&amp;fit=max&amp;s=071c90178b02212b1c1684615c3a9f7f)">
<div class="youtube-media-atom__play-button vjs-control-text">
Play Video
<span class="inline-play inline-icon ">
<svg width="46" height="39" viewBox="0 0 46 39" class="inline-play__svg inline-icon__svg">
<path d="M46 20.58v-2.02L1.64 0 0 1.3v36.55L1.64 39 46 20.58z"></path>
</svg> </span>
</div>
<div class="youtube-media-atom__bottom-bar">
<div class="youtube-media-atom__bottom-bar__duration">
0:45
</div>
</div>
</div>
</div>

在Al Jazeera文章的bottom的视频嵌入中可以观察到相同的行为，尽管嵌入式播放器不是YT。