React中用react-player嵌入YouTube视频自定义播放按钮及标题实现问题

实现方案 #

核心思路

通过相对定位容器包裹react-player，自定义绝对定位的覆盖层替代YouTube默认播放UI，通过状态控制覆盖层显隐和视频播放状态。

完整实现代码

import { useState, useRef } from 'react'
import ReactPlayer from 'react-player'

const CustomYouTubePlayer = () => {
  const [playing, setPlaying] = useState(false)
  const [showOverlay, setShowOverlay] = useState(true)
  const playerRef = useRef(null)

  // 点击自定义播放按钮触发逻辑
  const handlePlay = () => {
    setPlaying(true)
    setShowOverlay(false)
  }

  // 视频暂停时重新显示自定义覆盖层（可选，不需要可以删掉）
  const handlePause = () => {
    setShowOverlay(true)
    setPlaying(false)
  }

  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: '800px' }}>
      {/* ReactPlayer 基础配置 */}
      <ReactPlayer
        ref={playerRef}
        url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
        width='100%'
        height='auto'
        playing={playing}
        onPause={handlePause}
        config={{
          youtube: {
            playerVars: {
              showinfo: 0, // 隐藏YouTube顶部标题栏
              controls: playing ? 1 : 0, // 播放后才显示控制条
              rel: 0, // 隐藏播放结束后的相关视频
              iv_load_policy: 3, // 隐藏视频注释
              modestbranding: 1 // 隐藏YouTubelogo
            }
          }
        }}
      />

      {/* 自定义覆盖层，包含标题和播放按钮 */}
      {showOverlay && (
        <div 
          onClick={handlePlay}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            cursor: 'pointer',
            // 可自定义封面背景，不需要可以删掉下面一行
            background: 'rgba(0,0,0,0.3) url(你的封面图地址) center/cover no-repeat'
          }}
        >
          {/* 自定义视频标题，位置可任意调整 */}
          <div 
            style={{
              position: 'absolute',
              top: '24px',
              left: '24px',
              color: '#fff',
              fontSize: '20px',
              fontWeight: 'bold',
              textShadow: '0 2px 4px rgba(0,0,0,0.8)'
            }}
          >
            自定义视频标题
          </div>

          {/* 自定义播放按钮，样式可按设计图调整 */}
          <div 
            style={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '80px',
              height: '80px',
              borderRadius: '50%',
              background: 'rgba(255,255,255,0.9)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            {/* 播放图标可替换为svg或者img */}
            <div style={{
              width: 0,
              height: 0,
              borderTop: '16px solid transparent',
              borderBottom: '16px solid transparent',
              borderLeft: '24px solid #ff0000'
            }} />
          </div>
        </div>
      )}
    </div>
  )
}

export default CustomYouTubePlayer

可调整项说明

• 标题的位置、样式可直接修改对应style属性的数值，实现任意位置放置
• 播放按钮的尺寸、颜色、图标可根据设计图替换为自定义样式或图片
• 如果不需要暂停时显示自定义覆盖层，删除onPause绑定和对应的handlePause方法即可

内容的提问来源于stack exchange，提问作者Arun Kumar