YouTube動画付きカードを作る方法【HTML/CSS・サンプルコード付き】

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

YouTube動画付きカードを作る方法

YouTube動画付きカードを作る方法を紹介します。カードの中にYouTube動画、タイトル、説明文をまとめて表示することで、動画コンテンツを見やすく整理できます。動画紹介、講座ページ、商品説明、レビュー記事など、YouTube動画をページ内で分かりやすく見せたい場面に使いやすいレイアウトです。

このサンプルでは、HTMLとCSSだけを使用して、YouTube動画を埋め込んだシンプルなカードを作成します。カード上部に動画を配置し、その下にタイトルと説明文を表示する構成です。JavaScriptは使用していないため、静的ページにもそのまま導入できます。

カードの幅や余白、角丸、背景色、文字サイズ、動画の表示サイズなどはCSSから変更できます。YouTubeの埋め込みURLを差し替えるだけで別の動画に変更できるため、動画付きの記事一覧やコンテンツ紹介カードのベースとして利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

YouTube動画タイトル

カード内にYouTube動画を埋め込み、タイトルと説明文をまとめて表示するサンプルです。

このデモでは、カード上部にYouTube動画を配置し、その下にタイトルと説明文を表示するレイアウトを確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>YouTube動画付きカードを作る方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード表示エリア -->
  <div class="youtube-card_wrap">

    <!-- YouTube動画付きカード -->
    <article class="youtube-card_card">

      <!-- YouTube動画 -->
      <div class="youtube-card_video">
        <iframe
          src="https://www.youtube.com/embed/kAiX0itnonM"
          title="YouTube動画"
          allowfullscreen>
        </iframe>
      </div>

      <!-- カード本文 -->
      <div class="youtube-card_body">

        <!-- タイトル -->
        <h3>YouTube動画タイトル</h3>

        <!-- 説明文 -->
        <p>
          カード内にYouTube動画を埋め込み、タイトルと説明文をまとめて表示するサンプルです。
        </p>

      </div>

    </article>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カード表示エリア */
.youtube-card_wrap{
  display:flex;  /* カードを配置 */
  justify-content:center;  /* カードを中央寄せ */
  padding:40px 20px;  /* 外側の余白 */
}

/* カード本体 */
.youtube-card_card{
  width:360px;  /* カード横幅 */
  overflow:hidden;  /* 動画を角丸内に収める */
  border:1px solid #e5e7eb;  /* 枠線 */
  border-radius:12px;  /* カードの角丸 */
  background:#ffffff;  /* カード背景色 */
}

/* 動画エリア */
.youtube-card_video{
  width:100%;  /* 横幅いっぱい */
  aspect-ratio:16 / 9;  /* 動画の比率 */
}

/* YouTube動画 */
.youtube-card_video iframe{
  display:block;  /* 余計な隙間をなくす */
  width:100%;  /* 横幅いっぱい */
  height:100%;  /* 高さいっぱい */
  border:none;  /* 枠線を消す */
}

/* カード本文 */
.youtube-card_body{
  padding:20px;  /* 内側余白 */
}

/* タイトル */
.youtube-card_body h3{
  margin:0 0 10px;  /* タイトル下の余白 */
  font-size:20px;  /* タイトル文字サイズ */
  color:#111827;  /* タイトル文字色 */
}

/* 説明文 */
.youtube-card_body p{
  margin:0;  /* 余白 */
  color:#4b5563;  /* 説明文の文字色 */
  line-height:1.8;  /* 行間 */
}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではYouTube動画を表示するiframeと、動画タイトルや説明文をまとめたカードを作成します。CSSではカードの横幅、余白、背景色、枠線、角丸、動画の縦横比、タイトルや説明文のデザインを設定します。JavaScriptは使用しません。

このサンプルではYouTube動画は自動再生されません。カードを表示した時点では動画プレーヤーが表示され、再生ボタンをクリックすると動画が再生されます。自動再生したい場合は、YouTubeの埋め込みURLの末尾へ?autoplay=1を追加します。ただし、ブラウザの自動再生制限によって、音声付きの自動再生が許可されない場合があります。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlはYouTube動画付きカードを構成するファイルです。iframeで表示するYouTube動画、カードのタイトル、説明文を変更できます。表示する動画は、iframeのsrcに設定しているYouTubeの埋め込みURLを変更します。

style.cssはカード全体とYouTube動画の表示領域を設定するファイルです。カードの横幅、外側余白、枠線、角丸、背景色、本文の余白、タイトルの文字サイズ、説明文の文字色や行間などを変更できます。動画部分にはaspect-ratio:16 / 9;を指定しているため、16:9の比率で表示されます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。カード上部にYouTube動画が表示され、その下に「YouTube動画タイトル」と説明文が表示されます。

YouTube動画の設定方法
表示するYouTube動画を変更する場合は、最初に使用したいYouTube動画のURLを確認します。たとえば動画ページのURLが次の場合です。

https://www.youtube.com/watch?v=kAiX0itnonM

このURLでは、v=より後ろにあるkAiX0itnonMが動画IDです。YouTube動画をiframeへ埋め込む場合は、この動画IDを次の形式で使用します。

https://www.youtube.com/embed/動画ID

上記の動画IDを使用する場合は、次の埋め込みURLになります。

https://www.youtube.com/embed/kAiX0itnonM

index.htmlにあるiframeのsrcへ、この埋め込みURLを設定してください。別のYouTube動画を表示するときは、/embed/より後ろの動画IDを変更します。

動画を自動再生する場合
カードが表示されたときにYouTube動画を自動再生したい場合は、埋め込みURLの末尾へ?autoplay=1を追加します。

通常の埋め込みURLが次の場合、

https://www.youtube.com/embed/kAiX0itnonM

自動再生する場合は次のように変更します。

https://www.youtube.com/embed/kAiX0itnonM?autoplay=1

iframeでは次のようにsrcを変更し、allowへautoplayを指定します。

<iframe src="https://www.youtube.com/embed/kAiX0itnonM?autoplay=1" title="YouTube動画" allow="autoplay" allowfullscreen></iframe>

ただし、自動再生できるかどうかはブラウザの自動再生ポリシーにも左右されます。特に音声付き動画は自動再生がブロックされる場合があります。その場合は利用者が動画の再生ボタンをクリックして再生します。

カスタマイズできる内容
index.htmlでは表示するYouTube動画、「YouTube動画タイトル」のタイトル、カード下部の説明文を変更できます。動画の内容に合わせて、動画名や紹介文などへ変更できます。また、YouTubeの埋め込みURLへ?autoplay=1を追加することで、自動再生を指定できます。

style.cssではカードの横幅、外側余白、背景色、枠線、角丸、動画の縦横比、カード本文の余白、タイトルの文字サイズや色、説明文の文字色や行間を変更できます。

数値調整
style.css
padding:40px 20px;
カード表示エリアの内側余白です。上下の40pxを大きくするとカードと画面上下の間隔が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

width:360px;
カード本体の横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。

border:1px solid #e5e7eb;
カード本体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:12px;
カード本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

aspect-ratio:16 / 9;
YouTube動画を表示する領域の縦横比です。このサンプルでは一般的なYouTube動画に合わせて16:9で表示します。

padding:20px;
カード本文の内側余白です。値を大きくするとタイトルや説明文とカード端との間隔が広がります。

margin:0 0 10px;
タイトル下側の余白です。10pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。

font-size:20px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

レスポンシブ対応
YouTube動画にはwidth:100%とaspect-ratio:16 / 9を指定しているため、カードの横幅に合わせて16:9の比率を保ったまま表示されます。ただし、このサンプルではカード本体にwidth:360pxを指定しており、画面幅に応じてカード自体を縮小するためのmax-widthやメディアクエリは設定していません。