ReactでYoutubeの埋め込みをするときにレスポンシブに対応したい

はじめに

Youtubeの埋め込みをしたのですが、レスポンシブに対応するのに困ったのでまとめていきます。

問題

react-playerとreact-youtubeのどちらかを使って、
モバイルのときは指定した高さと幅
それ以外は幅を100%

という条件にしたかったのですが、なぜか大きさが変わらなかったり、大きさは変わるがプレイヤーの中は変わらない現象が起きました

解決方法

結果的にはreact-playerのwidthとheightを指定することで解決しました (classNameで調節していたのでだめでした)

        <ReactPlayer
          url={videoUrl}
          className="md:hidden"
          width={"343px"}
          height={"192px"}
        />
        <ReactPlayer url={videoUrl} className="hidden md:block" />

おわりに

なんとか解決できたので壁は超えた感じがしました