YouTubeショートを横並びで綺麗に表示するシンプルな実装

YouTubeショートを横並びで綺麗に表示するシンプルな実装

YouTubeショートを横並びで綺麗に表示するシンプルな実装

See the Pen Untitled by atat 7 (@atat-7) on CodePen.

YouTubeショートの埋め込みコードをコピーする

YouTubeショート動画上で右クリックするとメニューが表示されるので、

埋め込みコードをコピーしておきます。

実装

HTMLのiframeタグの部分を書き換えて完成です。

横幅に応じて3つのショート動画を横並びに表示

モバイルでは1列表示に切り替え

縁を丸くして見た目もスッキリ

HTML

<div class="container">
  <div class="video-wrapper">
    <iframe width="491" height="873" src="https://www.youtube.com/embed/WLt2e4_AVsw" title="Creepy Nuts - Bling‐Bang‐Bang‐Born / THE FIRST TAKE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </div>
  <div class="video-wrapper">
    <iframe width="491" height="873" src="https://www.youtube.com/embed/Pi_Z_L-v_2I" title="ano - ちゅ、多様性。 / THE FIRST TAKE @anoofficialchannel" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </div>
  <div class="video-wrapper">
    <iframe width="491" height="873" src="https://www.youtube.com/embed/U0DcAXCmppg" title="ATARASHII GAKKO! – OTONABLUE / THE FIRST TAKE @ATARASHIIGAKKO" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </div>
</div>

CSS

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}

.video-wrapper {
  flex: 1 1 calc(33.333% - 16px); /* 3列に分ける */
  aspect-ratio: 9 / 16;
  position: relative;
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

モバイル対応

/* スマホ対応（1列表示） */
@media (max-width: 768px) {
  .video-wrapper {
    flex: 1 1 100%;
  }
}

上記のコードにはメディアクエリが含まれているので、スマホでは縦並びに自動で切り替わります。

まとめ

YouTubeショート動画を横並びに表示するだけなら、HTMLとCSSでとてもシンプルに実現できます。
縁を丸くしたり、スマホ対応もできるので、ポートフォリオや紹介サイト、ブログなどでも映えるレイアウトになります。

ぜひこのコードをベースに、あなたのサイトにも取り入れてみてください！