react 使用 Youtube 播放器

 使用其他元素的事件来播放和暂停 youtube 组件, 类似老头环官网那种, 点击后直接全屏播放 youtube 视频

老头环官网: ELDEN RING | Official Website (EN)

其实就是自定义video下面垫了一个 youtube 的 iframe

原始效果是这样:

  

我们发现将上层自定义 video 隐藏掉后, iframe 是这样的

 

那么其实就是监听顶层的一个蒙版 div, 给这个 div 加入一个点击事件, 点击后进入全屏并播放 youtube, 看似简单, 我踩了很多坑, 这个 iframe的元素内容 是无法选中的, 并且只能通过

youtube iframe api 来控制播放器事件, 所以我们得拿到他的 event 事件去触发

以下代码我就使用两个按钮来演示, 一个播放按钮, 一个停止按钮, 那个 className 我用的 tailwindcss, 如果你们不会用, 就用原始的 css 就行

import React, { useRef, useState } from 'react';
import YouTube from