在 iframe 嵌入的 youtube 视频上显示缩略图

Question

我想将图像显示为缩略图，当您点击它时，youtube 视频应该会播放。我尝试使用 <video> 标签，但它不支持 youtube 视频，因此无法设置图像。我想在 Reactjs 中实现它。任何人都可以提出任何解决方案吗？

<iframe
     width='100%'
     height='100%'
     src=[youtube_video_link]
     frameBorder='0'
     allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
     allowFullScreen
></iframe>

Answer 1

我猜你可以在你的应用中使用reactplayer 包来显示任何带有缩略图的视频。 在这里可用：link

基本示例：

<ReactPlayer                                                    
 className=[any_class_name]
 light={true}
 url={url}
 playing
/>

light 属性将视频缩略图附加到视频。

您也可以将缩略图设置为任何其他图像（您选择），只需将 true 替换为任何图像 URL。