将Youtube和Twitch视频嵌入Web应用

最近一段时间都投身到海外业务的开发，其中涉及到了了Youtube和Twitch的视频嵌入播放，发现国内对此方面的博文和示例代码较少，所以写此文章...

代码（tsx）如下：

Youtube Video

interface Props {
  video: number
  width: string | number
  height: string | number
  ...otherProps
}

const YoutubeVideo: React.FC<Props> = ({ video, ...restProps }) => {
  return (
    <iframe
      {...restProps}
      src={`https://www.youtube-nocookie.com/embed/${video}?&autoplay=1`}
    />
  )
}

Twitch Video

官方文档：Video & Clips

interface Props {
  video: number
  width: string | number
  height: string | number
  ...otherProps
}

const TwitchVideo: React.FC<Props> = ({ video, ...restProps }) => {
  return (
    <iframe
      {...restProps}
      src={`https://player.twitch.tv/?video=v${video}&parent=${window.location.hostname}&autoplay=true`}
    />
  )
}