YouTube動画をテーブルに表示する方法
YouTube動画をテーブルに表示する方法を紹介します。このサンプルでは、テーブルのセル内にYouTube動画をiframeで埋め込み、動画タイトルや説明と並べて一覧表示します。複数の動画を表形式で整理できるため、それぞれの動画を比較しながら確認できます。
商品紹介動画、操作方法、講座、作品紹介など、複数のYouTube動画を項目ごとに整理して掲載したい場合に利用できます。動画を通常のテーブル内へ配置するため、動画とタイトルや説明などの情報を対応させて分かりやすく表示できます。
HTMLではテーブルの見出し、動画タイトル、説明、YouTube動画IDを変更でき、CSSではテーブルの横幅、セルの余白、枠線、動画の表示サイズなどを調整できます。動画部分は横幅に合わせて縮小されるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テーブルのセル内に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>
<!-- YouTube動画テーブル全体 -->
<div class="youtube-video-table_wrap">
<!-- タイトル -->
<div class="youtube-video-table_title">
YouTube動画をテーブルに表示
</div>
<!-- 説明文 -->
<p class="youtube-video-table_text">
テーブルのセル内にYouTube動画を埋め込んで表示します。
</p>
<!-- 横スクロール用エリア -->
<div class="youtube-video-table_scroll">
<!-- テーブル -->
<table class="youtube-video-table_table">
<!-- テーブル見出し -->
<thead>
<tr>
<th>項目</th>
<th>説明</th>
<th>動画</th>
</tr>
</thead>
<!-- テーブル本文 -->
<tbody>
<tr>
<!-- 項目 -->
<td class="youtube-video-table_name">
サンプル動画
</td>
<!-- 説明 -->
<td class="youtube-video-table_description">
YouTube動画をテーブルのセル内に表示したサンプルです。
</td>
<!-- YouTube動画 -->
<td class="youtube-video-table_video">
<!--
【YouTube動画の設定方法】
1. YouTubeで表示したい動画を開きます。
2. 動画ページの「共有」をクリックします。
3. 「埋め込む」を選択します。
4. 表示されたiframeコード内の
src="https://www.youtube.com/embed/動画ID"
のURLを確認します。
5. 下記の YOUR_YOUTUBE_EMBED_URL を
取得した埋め込みURLへ置き換えてください。
例：
https://youtube.com/watch?v=XXXXXXXXXXX
通常の
https://www.youtube.com/watch?v=XXXXXXXXXXX
形式ではなく、/embed/形式のURLを使用します。
-->
<iframe
src="YOUR_YOUTUBE_EMBED_URL"
title="YouTube動画"
allowfullscreen>
</iframe>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSSの2ファイルで構成されています。HTMLではテーブルの見出し、項目、説明文、YouTube動画を表示するiframeを配置し、CSSではテーブルの横幅、セルの余白、見出しの色、動画のサイズなどを設定します。JavaScriptや外部ライブラリは使用していません。
YouTube動画はiframeを使ってテーブルのセル内へ埋め込みます。表示する動画は利用者自身で選び、YouTubeから取得した埋め込みURLをindex.html内のYOUR_YOUTUBE_EMBED_URLへ設定して使用します。動画ファイル自体をsampleフォルダへ配置する必要はありません。
テーブルは「項目」「説明」「動画」の3列で構成され、動画部分は16:9の比率を維持して表示されます。画面幅が狭くテーブル全体を表示できない場合は、テーブル部分を横方向へスクロールして確認できる構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはYouTube動画を表示するテーブル全体を構成するファイルです。「YouTube動画をテーブルに表示」のタイトル、説明文、「項目」「説明」「動画」の見出し、サンプル動画の項目名と説明文、YouTube動画を表示するiframeを記述しています。表示する動画は、iframeのsrc属性にあるYOUR_YOUTUBE_EMBED_URLを利用者自身で取得したYouTubeの埋め込みURLへ置き換えて設定します。
style.cssはテーブル全体のデザインを設定するファイルです。サンプル全体の最大横幅や余白、テーブルの最小横幅、セルの余白、見出しの背景色、各列の横幅、動画の角丸などを変更できます。また、動画にはaspect-ratio:16 / 9を指定し、セルの横幅に合わせながら16:9の比率で表示します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。index.htmlからstyle.cssを読み込む構成になっているため、2つのファイルは同じsampleフォルダ内へ配置してください。次に、テーブルへ表示したいYouTube動画の埋め込みURLを取得します。
YouTubeで表示したい動画を開き、「共有」から「埋め込む」を選択します。表示された埋め込みコードのiframe内にあるsrc属性を確認してください。例えばsrc="https://www.youtube.com/embed/XXXXXXXXXXX"と表示されている場合は、https://www.youtube.com/embed/XXXXXXXXXXXの部分が使用する埋め込みURLです。通常の動画ページで使用されるwatch?v=形式のURLではなく、/embed/形式のURLを使用します。
取得した埋め込みURLをindex.html内のYOUR_YOUTUBE_EMBED_URLへ設定します。例えば取得した埋め込みURLがhttps://www.youtube.com/embed/XXXXXXXXXXXの場合は、src="https://www.youtube.com/embed/XXXXXXXXXXX"となるように置き換えます。設定後にsample/index.htmlをブラウザで開くと、テーブルの「動画」セル内に指定したYouTube動画が表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、テーブルの見出し、「サンプル動画」の項目名、説明セルの文章、iframeのtitle、表示するYouTube動画の埋め込みURLを変更できます。別の動画へ変更する場合は、YOUR_YOUTUBE_EMBED_URLを新しく取得した埋め込みURLへ置き換えてください。
style.cssではサンプル全体の最大横幅や余白、背景色、テーブルの最小横幅、セルの余白、見出しの背景色と文字色、項目列と動画列の横幅、動画部分の角丸などを変更できます。
数値調整
style.css
max-width:900px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-width:680px;
テーブルの最小横幅です。値を大きくするとテーブルの最低限確保される横幅が広くなり、表示領域より大きくなった場合は横スクロールで確認できます。
padding:16px;
見出しセルと通常セルの内側余白です。値を大きくすると文字や動画とセルの枠線との間隔が広がります。
width:180px;
「項目」セルの横幅です。値を大きくすると項目列が広くなります。
width:320px;
「動画」セルの横幅です。値を大きくすると動画を表示する列が広くなります。
aspect-ratio:16 / 9;
YouTube動画の縦横比です。このサンプルでは一般的な動画比率である16:9で表示します。
border-radius:8px;
YouTube動画表示部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
@media (max-width:640px)
スマートフォン向けのスタイルへ切り替える基準となる画面幅です。このサンプルでは640px以下になると全体の内側余白を変更します。
padding:24px 18px;
画面幅640px以下で使用するサンプル全体の内側余白です。上下を24px、左右を18pxにして、狭い画面で使用する余白を小さくしています。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxによって、サンプル全体が画面幅に合わせて縮小されます。テーブルにはmin-width:680pxを設定し、その外側の.youtube-video-table_scrollへoverflow-x:autoを指定しているため、画面幅が狭い場合はテーブル部分を横スクロールして確認できます。
YouTube動画にはwidth:100%とaspect-ratio:16 / 9を指定しているため、動画セルの横幅に合わせながら16:9の比率を維持します。さらに画面幅640px以下では、@media (max-width:640px)によって全体の内側余白を24px 18pxへ変更します。これにより、スマートフォン・タブレット・PCで利用できます。
コメント