YouTube動画をツールチップに表示する方法
YouTube動画をツールチップに表示する方法を紹介します。このサンプルでは、「動画を確認」ボタンへマウスカーソルを合わせるとツールチップが開き、その中にYouTube動画をiframeで表示します。基本のツールチップと同じようにCSSの:hoverを利用して表示・非表示を切り替えるため、JavaScriptを使用せずHTMLとCSSだけで実装できます。
商品紹介、サービスの操作説明、使い方ガイド、会員サイトの補足動画など、ページ内の文章を残したまま必要なときだけYouTube動画を確認させたい場合に利用できます。通常時は動画を非表示にしておき、ボタンへマウスカーソルを合わせたときだけツールチップとして表示するため、動画のために大きな表示スペースを常時確保する必要がありません。
HTMLではタイトル、説明文、ボタンの文章、表示するYouTube動画の埋め込みURLを変更できます。CSSではツールチップの横幅、ボタンとの間隔、背景色、角丸、表示切り替え時間などを調整できます。動画は16:9の比率を保ちながら横幅に合わせて表示され、画面幅が狭い場合はツールチップも縮小するため、スマートフォン・タブレット・PCの画面幅に対応できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンへマウスカーソルを合わせると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-tooltip_wrap">
<!-- タイトル -->
<div class="youtube-video-tooltip_title">
YouTube動画をツールチップで表示
</div>
<!-- 説明文 -->
<p class="youtube-video-tooltip_text">
ボタンへマウスカーソルを合わせるとYouTube動画を表示します。
</p>
<!-- ツールチップ表示エリア -->
<div class="youtube-video-tooltip_area">
<!-- YouTube動画を表示するボタン -->
<button class="youtube-video-tooltip_button" type="button">
動画を確認
</button>
<!-- YouTube動画を表示するツールチップ -->
<div class="youtube-video-tooltip_message">
<!-- 動画表示エリア -->
<div class="youtube-video-tooltip_frame">
<!--
【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
通常の動画URL
https://www.youtube.com/watch?v=XXXXXXXXXXX
をそのままsrcへ指定するのではなく、
/embed/形式のURLを使用してください。
-->
<iframe
src="YOUR_YOUTUBE_EMBED_URL"
title="YouTube動画"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではYouTube動画を表示するボタン、ツールチップ、動画を埋め込むiframeを配置し、CSSではツールチップの位置や大きさ、表示・非表示、動画表示エリアなどのデザインを設定します。JavaScriptは使用せず、CSSの:hoverを利用して、ボタンへマウスカーソルを合わせたときにツールチップを表示します。
YouTube動画自体はサンプル一式には含まれていません。利用者自身で表示したいYouTube動画を選び、YouTubeの共有機能から取得できる埋め込み用URLを、index.html内のYOUR_YOUTUBE_EMBED_URLへ設定して使用します。この実装ではYouTube Data APIなどのAPIは使用しないため、APIキーを用意する必要はありません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはYouTube動画ツールチップ全体を構成するファイルです。「YouTube動画をツールチップで表示」のタイトル、説明文、「動画を確認」のボタン、動画を表示するiframeを記述しています。表示する動画はiframeのsrc属性にあるYOUR_YOUTUBE_EMBED_URLを、表示したいYouTube動画の埋め込み用URLへ置き換えて設定します。
style.cssはツールチップ全体のデザインと表示動作を設定するファイルです。全体の横幅や余白、ボタンの色や角丸、ツールチップの横幅・位置・背景色、動画表示部分の比率などを変更できます。:hoverによってツールチップのopacityとvisibilityを切り替え、マウスカーソルを外すと自動で非表示になります。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。次に、ツールチップへ表示したい動画をYouTubeで開き、「共有」をクリックしてください。「埋め込む」を選択するとiframe形式の埋め込みコードが表示されます。そのコード内にあるsrc="..."のURL部分を使用します。
取得した埋め込み用URLをindex.html内のYOUR_YOUTUBE_EMBED_URLへ設定します。
src="YOUR_YOUTUBE_EMBED_URL"
例えば、取得した埋め込み用URLがhttps://www.youtube.com/embed/XXXXXXXXXXXの場合は、src="https://www.youtube.com/embed/XXXXXXXXXXX"のように置き換えます。通常のhttps://www.youtube.com/watch?v=...形式ではなく、YouTubeの埋め込みコードに記載されている/embed/形式のURLを使用してください。設定後にsample/index.htmlをブラウザで開き、「動画を確認」ボタンへマウスカーソルを合わせると、ツールチップ内にYouTube動画が表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文章、iframeのtitle、表示するYouTube動画の埋め込み用URLを変更できます。別の動画へ変更する場合は、YOUR_YOUTUBE_EMBED_URLを新しい動画の埋め込み用URLへ置き換えてください。
style.cssではサンプル全体の最大横幅、余白、背景色、ボタンの色やサイズ、ツールチップの横幅、ボタンとの間隔、背景色、角丸、表示切り替え時間などを変更できます。動画表示エリアにはaspect-ratio:16 / 9;を指定しているため、ツールチップの横幅に合わせながら16:9の比率で動画を表示します。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。
padding:14px 30px;
「動画を確認」ボタンの内側余白です。14pxは上下、30pxは左右の余白を表します。値を大きくするとボタンが大きくなります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
bottom:calc(100% + 14px);
ボタンとツールチップの間隔です。14pxを大きくするとツールチップがボタンから上方向へ離れます。
width:520px;
ツールチップの基本横幅です。値を大きくすると動画の表示領域が横に広がり、小さくすると狭くなります。
max-width:calc(100vw - 48px);
ツールチップが画面幅を超えて広がることを抑える最大横幅です。48px分を画面幅から差し引いて表示します。
padding:14px;
ツールチップ内部の余白です。値を大きくすると動画とツールチップ外周との間隔が広がります。
border-radius:12px;
ツールチップの角丸です。値を大きくすると丸みが強くなります。
border:7px solid transparent;
ツールチップ下部に表示する三角形の大きさです。7pxを大きくすると三角形が大きくなり、小さくすると小さくなります。
transition:opacity .3s ease, visibility .3s ease;
ツールチップの表示切り替え時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。
aspect-ratio:16 / 9;
YouTube動画表示エリアの縦横比です。このサンプルではYouTube動画を16:9の比率で表示します。
@media (max-width:640px)
画面幅に応じてスタイルを切り替える基準です。このサンプルでは640px以下で全体の内側余白とツールチップの横幅を変更します。
padding:24px 18px;
画面幅640px以下で使用するサンプル全体の内側余白です。24pxは上下、18pxは左右の余白を表します。
width:calc(100vw - 64px);
画面幅640px以下で使用するツールチップの横幅です。画面幅から64pxを差し引くことで、狭い画面でもツールチップが横へ広がりすぎないようにします。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてサンプル全体が縮小されます。ツールチップにはmax-width:calc(100vw - 48px)を指定し、動画表示エリアにはaspect-ratio:16 / 9を使用しているため、ツールチップの横幅が変化しても動画を16:9の比率で表示できます。
さらに画面幅640px以下では、全体の内側余白を24px 18px、ツールチップの横幅をcalc(100vw - 64px)へ変更します。これにより、スマートフォン・タブレット・PCの画面幅に合わせてYouTube動画のツールチップを表示できます。
コメント