youtube - 可点击的预览图片,可自动加载YouTube视频

标签 youtube lazy-loading youtube-javascript-api

我们正在努力实现可点击的预览图像,该图像将播放Youtube视频。

目的是避免加载不必要的JS代码并提高Google Pagespeed得分。

我们已经实现了可行的解决方案。

但是问题在于,需要两次单击才能实际加载Youtube视频:一次单击以显示Youtube视频,另一次才真正开始播放视频。

我知道一个事实是可以一键加载此类视频,因为存在诸如this one之类的解决方案(但它需要Wordpress)

我们该如何处理?是否有现成的解决方案来实现视频的延迟加载? (不需要Wordpress吗?)

最佳答案

我使用了这个小教程:https://www.labnol.org/internet/light-youtube-embeds/27941/

您将显示YouTube视频的缩略图,并且“当访问者单击播放按钮时,缩略图将替换为自动播放设置为1的标准YouTube视频播放器,从而可以立即播放视频。”

您需要javascript,css和html(无需Wordpress)。希望对您有帮助。

关于youtube - 可点击的预览图片,可自动加载YouTube视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54330849/

相关文章:

c# - 通过URL检索YouTube见解

javascript - iframe 刷新后 OnStateChange 不起作用

javascript - YouTube API搜索并获取视频列表

youtube - 嵌入YouTube channel 中的热门视频

android - 尝试将文件添加到Android Studio 1.4 Beta 2中的“外部库”文件夹中无济于事。

youtube - 在YouTube上搜索我自己的视频

javascript - 在页面的其余部分完成加载后延迟加载 html5 视频

java - 用于实现 Android 延迟加载的 cglib 替代方案

c# - Entity Framework - 延迟加载或额外的异步/等待查询方法?

safari - YouTube 嵌入请求仅针对 Safari 进行了更改 –> chromeless 播放器无法操作