@devbookhq/docusaurus-code-video-plugin/lib/theme/CodeBlock/VideoPlayer/PlayButton.js

Add a video to a Docusaurus code block and highlight code lines as the video plays.

import React from 'react';
import styles from './styles.module.css';
import PlayIcon from './PlayIcon';
import CloseIconBig from './CloseIconBig';
function PlayButton({ onOpen, youtubeID, onClose, isPlaying, }) {
    return (<div className={styles['play-wrapper']} onClick={isPlaying ? onClose : onOpen}>
      <img alt="Video thumbnail" src={`https://img.youtube.com/vi/${youtubeID}/mqdefault.jpg`} className={styles['play-thumbnail']}>
      </img>
      {isPlaying ? <CloseIconBig className={styles['close']}/> : <PlayIcon className={styles['play']}/>}
    </div>);
}
export default PlayButton;