.youtube {
  display: flex;
  justify-content: center;
}

.youtube__iframe {
  /* 横幅がはみ出ないようにする対応 */
  max-width: 100%;
  /* 動画の切り替えをする時に背景が白いと、ロードが長く感じてしまうので黒を指定 */
  background-color: #000;
  /* vwはCSSの単位です。viewport widthの略です。*/
  /* 100vw * 高さ比率 / 横幅比率 */
  height: calc(100vw * 9 / 16);
}

/* 横幅が768px以上 ≒ スマホを除いたタブレットやPCの表示のみの指定になります。 */
@media screen and (min-width: 768px) {
  /* 以下はスマホ以上のデバイスの表示の時だけ適応したいスタイル */
  .youtube__iframe {
    /* PC表示の時はYoutubeの動画の高さと横幅は固定するのが一番制御がしやすいです */
    /* 下の記述は640pxと360pxは仮です。 */
    width: 800px;
    height: 450px;
  }
}