实现iframe嵌套bilibili视频

import React, { useState, useEffect } from 'react'
import styles from './style.less'
const data = [
    { name: '夜曲', vid: 'BV1tA411q7xi' },
    { name: '以父之名', vid: 'BV1mp4y1C7ja' },
    { name: '晴天', vid: 'BV1Ag4y1q7tP' },
    { name: '七里香', vid: 'BV1AA411q7a8' },
]
const index = () =>
{
    const [vid, setVid] = useState('BV1tA411q7xi')  // 默认 Vid
    const [underline, setUnderline] = useState(0)  // 默认切换
    useEffect(() =>
    {  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~
        initColor()
        return () =>
        {  // 组件卸载之前 做一些收尾工作 比如清楚定时器/取消订阅 等 ~
        }
    }, [])  // 检测数组内变量 如果为空 则监控全局
    const initColor = () =>
    {
        let score = new Date().getHours()
        let color = null
        switch (true)
        {
            case score >= 18 && score <= 24:
                color = 'rgb(64, 123, 224,.4)'
                break;
            case score >= 12 && score <= 24:
                color = 'rgba(189, 22, 72, 0.4)'
                break;
            case score >= 6 && score <= 24:
                color = 'rgb(47, 154, 158,.4)'
                break;
            case score >= 0 && score <= 24:
                color = 'rgb(160, 53, 133,.4)'
                break;
            default:
                color = 'rgb(0, 0, 0,.4)'
        }
        return color
    }
    const liClick = (data, index) =>
    {
        setVid(data.vid)
        setUnderline(index)
    }
    return (
        <div style={{ backgroundColor: initColor() }} className={styles.container}>
            <nav className={styles.nav}>
                <ul>
                    {data.map((data, index) => (
                        <li key={index} style={underline === index ? { color: 'red' } : null} className={underline === index ? styles.underline : null} onClick={() => { liClick(data, index) }}>{data.name}</li>
                    ))}
                </ul>
            </nav>
            <a target="_blank" className={styles.github_corner} href="https://blog.csdn.net/chuan0106">
                <img src="https://img0.baidu.com/it/u=686268762,471219961&fm=26&fmt=auto" alt="" />
            </a>
            <div className={styles.center}>
                <iframe allowFullScreen={true} width="100%" height="450" scrolling="no"
                    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
                    src={`//player.bilibili.com/player.html?aid=541205956&bvid=${vid}&cid=208099724&page=1&as_wide=1&high_quality=1&danmaku=1`}
                    frameBorder="0"></iframe>
            </div>
        </div >
    )
}

export default index

CSS

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: pink;
}

.nav {
  margin: 25px 64px 0 0;
  position: absolute;
  right: 0;
  text-align: right;
  z-index: 10;
  color: #5698b5;
  font-size: 18px;
  color: #407be0
}

.nav li,
.nav ul {
  display: inline-block;
  list-style: none;
  margin: 0;
}

.nav li {
  position: relative;
  display: inline-block;
  margin: 0 1rem;
  padding: 5px 0;
  cursor: pointer;
}

.underline::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #E40960, #3C85FF);
  border-radius: 2px;
}

.github_corner {
  border-bottom: 0;
  position: fixed;
  right: 0;
  text-decoration: none;
  top: 0;
  z-index: 1;

  img {
    color: #fff;
    fill: var(--theme-color, #42b983);
    height: 80px;
    width: 80px;
  }
}

iframe {
  display: block;
  border: 1px solid #eee;
  width: 1px;
  min-width: 100%;
}

.center {
  width: 800px;
  margin-top: 200px;
  margin-right: auto;
  margin-left: auto;
}