YouTube動画をトーストに表示する方法
YouTube動画をトーストに表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面右下にトーストが表示され、その中でYouTube動画を再生できるようにします。通常のテキストメッセージを表示するトーストとは異なり、iframeを組み合わせることで動画コンテンツをコンパクトな通知エリアへ表示できます。
商品やサービスの紹介動画、操作方法を説明する動画、Webサイトの案内動画などを、現在のページから移動せずに見せたい場面で利用できます。トーストにはYouTube動画と閉じるボタンを配置し、「動画を表示」をクリックすると画面右下へ表示されます。閉じるボタンをクリックするとトーストを非表示にできるため、利用者が必要なときだけ動画を確認できます。
HTMLではYouTubeの動画IDや表示内容を変更でき、CSSではトーストの横幅、余白、背景色、角丸、影、表示位置などを調整できます。動画部分は横幅に合わせて縮小されるため、スマートフォン・タブレット・PCでも利用できます。HTML・CSSとバニラJavaScriptだけで実装でき、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-toast_wrap">
<!-- タイトル -->
<div class="youtube-video-toast_title">
YouTube動画を表示
</div>
<!-- 説明文 -->
<p class="youtube-video-toast_text">
ボタンをクリックすると、画面右下のトーストにYouTube動画が表示されます。
</p>
<!-- トーストを表示するボタン -->
<button
type="button"
class="youtube-video-toast_button"
data-youtube-toast-open="">
動画を表示
</button>
</div>
<!-- YouTube動画を表示するトースト -->
<div class="youtube-video-toast_message" data-youtube-toast="">
<!-- トースト上部 -->
<div class="youtube-video-toast_header">
<!-- トーストタイトル -->
<div class="youtube-video-toast_heading">
YouTube動画
</div>
<!-- 閉じるボタン -->
<button
type="button"
class="youtube-video-toast_close"
data-youtube-toast-close=""
aria-label="閉じる">
×
</button>
</div>
<!-- YouTube動画表示エリア -->
<div class="youtube-video-toast_video">
<!--
【YouTube動画IDの設定方法】
1. YouTubeで表示したい動画を開きます。
2. 動画ページのURLを確認します。
通常のURL例：
https://www.youtube.com/watch?v=ABCDEFGHIJK
この場合、
v= の後ろにある ABCDEFGHIJK が動画IDです。
短縮URL例：
https://youtu.be/ABCDEFGHIJK
この場合、
youtu.be/ の後ろにある ABCDEFGHIJK が動画IDです。
3. 下記の YOUR_VIDEO_ID を、
取得した動画IDへ置き換えてください。
この実装ではYouTube Data APIを使用しないため、
APIキーは必要ありません。
-->
<iframe
src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
title="YouTube動画"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではYouTube動画を表示するトースト、表示ボタン、閉じるボタンを作成し、CSSではトーストの位置やサイズ、動画の16:9表示、表示・非表示時の動きを設定します。JavaScriptでは「動画を表示」ボタンと閉じるボタンのクリックを検知し、トーストの表示状態を切り替えます。
YouTube動画はiframeによる埋め込み方式で表示します。YouTube Data APIは使用しないため、APIキーは必要ありません。利用する際は、表示したいYouTube動画の動画IDを利用者自身で用意し、index.html内のYOUR_VIDEO_IDを取得した動画IDへ置き換えてください。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは、YouTube動画トーストのHTML構造を作成するファイルです。「動画を表示」ボタン、トーストのタイトル、閉じるボタン、YouTube動画を表示するiframeを記述しています。表示する動画を変更する場合は、このファイルにあるYOUR_VIDEO_IDを変更します。
style.cssは、ページ内の表示エリアとトーストのデザインを設定するファイルです。トーストの横幅、右端・下端からの位置、余白、角丸、影、表示時のアニメーション、YouTube動画の16:9表示などを変更できます。
script.jsは、トーストの表示・非表示を制御するファイルです。「動画を表示」ボタンをクリックするとis-showクラスを追加してトーストを表示し、×ボタンをクリックするとクラスを削除してトーストを閉じます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3つのファイルは同じ階層へ保存してください。
次に、YouTubeでトーストへ表示したい動画を開き、動画IDを確認します。通常の動画URLがhttps://www.youtube.com/watch?v=ABCDEFGHIJKの場合は、v=の後ろにあるABCDEFGHIJKが動画IDです。短縮URLがhttps://youtu.be/ABCDEFGHIJKの場合は、youtu.be/の後ろにあるABCDEFGHIJKが動画IDです。
取得した動画IDを、index.html内のYOUR_VIDEO_IDへ設定します。たとえば動画IDがABCDEFGHIJKの場合、iframeのsrcはhttps://www.youtube.com/embed/ABCDEFGHIJKとなります。設定後にsample/index.htmlをブラウザで開き、「動画を表示」をクリックすると画面右下へYouTube動画を含むトーストが表示されます。×ボタンをクリックするとトーストを閉じることができます。
カスタマイズできる内容
index.htmlでは、表示ボタンの文章、トーストのタイトル、YouTube動画の動画IDを変更できます。別の動画を表示したい場合はYOUR_VIDEO_IDのみを対象動画のIDへ置き換えます。
style.cssでは、表示エリアの横幅や余白、ボタンの色・サイズ・角丸、トーストの横幅・表示位置・背景色・角丸・影、動画部分の角丸などを変更できます。また、rightとbottomを調整すると、トーストと画面端との間隔を変更できます。
script.jsでは、is-showクラスの追加と削除によってトーストの表示状態を切り替えています。今回のサンプルでは自動で閉じる処理は行わず、×ボタンをクリックしたときに閉じる仕様です。
数値調整
style.css
max-width:700px;
ページ内に表示するサンプル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
サンプルタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
padding:12px 24px;
「動画を表示」ボタンの内側余白です。12pxが上下、24pxが左右の余白を表します。値を大きくするとボタンが大きくなります。
right:24px;
トーストと画面右端との間隔です。値を大きくすると画面右端から離れます。
bottom:24px;
トーストと画面下端との間隔です。値を大きくすると画面下端から上方向へ離れます。
width:min(420px,calc(100vw - 48px));
トーストの横幅です。通常は最大420pxで表示し、画面幅が狭い場合は左右に24pxずつ余白を確保できる幅まで縮小します。
padding:16px;
トースト内部の余白です。値を大きくすると動画やタイトルとトースト外周との間隔が広がります。
border-radius:12px;
トースト全体の角丸です。値を大きくすると丸みが強くなります。
transform:translateY(12px);
非表示時にトーストを下方向へ移動させる距離です。12pxを大きくすると、表示時の移動距離が大きくなります。
transition:.3s;
トーストの表示状態が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
aspect-ratio:16 / 9;
YouTube動画表示エリアの縦横比です。このサンプルでは16:9で表示します。
font-size:24px;
×ボタンの文字サイズです。値を大きくすると×が大きく表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのトーストにはwidth:min(420px,calc(100vw - 48px));を設定しているため、画面幅が狭くなるとトーストも自動的に縮小します。YouTube動画部分にはwidth:100%とaspect-ratio:16 / 9を使用しており、トーストの横幅に合わせながら16:9の比率を維持します。
また、640px以下ではサンプル全体の余白をpadding:24px 18px;へ変更し、トーストをright:16px;、bottom:16px;、width:calc(100vw - 32px);へ切り替えます。これにより、スマートフォン・タブレット・PCの画面幅に合わせて表示できます。
コメント