試合動画の埋め込み

コンテンツを活用したい

リーグのコンテンツとして試合動画を撮っているので上手く活用したいところです。

react-youtube

今回はreact-youtubeというパッケージを使っています。

データの紐付け

定石としてはDBにカラム作ってAPIで返すべきなのだとは思いますが、今回はjsonですらないです。

• jsonにはしたいけどコメント書きたい

ということで試合IDをキーとしてyoutubeの動画IDを格納するファイルを作りました。
DBに追加するのと手間は同じぐらいだと思います。

export const youtubeConfig =
{
  //日付などのコメント
  "試合ID":"youtube動画ID",
}

これをreact内のループでこう書いてやります。

import { youtubeConfig } from './youtubeConfig'
(中略)
<YouTube
 videoId={youtubeConfig[試合ID]}
/>

CSSでアスペクト比を維持する

個人開発でcalcを使ったのは初めてです。
業務でもそんなに使ったことはないのですが...。
ブラウザの幅に応じて動画の幅を拡大縮小し、高さをアスペクト比を維持するように変えてやります。

iframe{
    width: 90%;
    height: calc(90vw*9/16);
  }