【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ①

YouTube

ソースコード
カスタマイズの重要性と目的
iframeプレイヤーの設定にこだわる
- 効率化のためコードはテンプレート化
- レスポンシブなプレイヤーの縦横比変更
キャプションとディスクリプション
- その意図と効果
- 配置と装飾

動画紹介をさらに魅力的にカスタマイズするテクニックを紹介します。

CSSコード・Googleフォントなどの活用で、タイトルやディスクリプション（動画紹介文）のテキストを装飾したり、動画プレイヤー埋め込み時のプロパティ指定、そしてレスポンシブな画面比の変更まで、全ての要素にこだわります。

さらに、マウスクリックでディスクリプションの表示非表示をするアニメーションも実装。動画紹介をより魅力的にする方法を一挙公開！します笑

デモページを見る

ソースコード

カスタマイズの重要性と目的

動画は今や、オンラインプレゼンスを確立するための強力なツールとなっています。

制作した動画や、紹介したい動画をサイトに埋め込むとき、その紹介部分をさらに魅力的にカスタマイズすることは、視聴者の注意・関心を引く重要な一環です。動画に専念して視聴してもらうためにも要素を最大限に活用することが大切です。

動画紹介のカスタマイズは、視聴者が興味を持ち、動画をクリックして再生する判断材料ともなります。動画を鑑賞する意欲を増すために、見出し・サムネイル・紹介文など、視聴者の目を引く要素を活用することが成功につながります。

動画に興味深い印象を与え、”プロフェッショナルでポジティブ” ｸﾞｯ(๑•̀ㅂ•́)و✧ な影響をもたらすインパクトを最大限に引き出すために、ここからは動画紹介をより魅力的にするためのプロ技（！？）を5つに分け、解説していきます！

iframeプレイヤーの設定にこだわる

効率化のためコードはテンプレート化

まずは母体となるYoutubeの埋め込みを、行っていきましょう！

通常は、埋め込みたいYoutube動画の右クリックなどからiframeコードを取得すると思います。

<iframe width="1280" height="720" src="https://www.youtube.com/embed/43HOYwh3qsI" title="Taylor Swift - Blank Space" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

ですがこれですと、最低限のプロパティしか設定されていないのと、widthなどの指定は後述するレスポンシブ対応には不要となりますので、あらかじめ埋め込み用のコードはテンプレート化し、動画IDだけ差し替えればいい状態にしておきます。

<iframe allowfullscreen frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" src="https://www.youtube.com/embed/
ここに動画ID
?
preload=none&
playsinline=1&
rel=0&
modestbranding=1&
color=white&
cc_load_policy=1
"></iframe>

Copied!

現在私が実際に使用しているコードです。プロパティ設定などを加えてカスタマイズしてあります。

各パラメータ値は、アンパサンド（&）で繋ぎます。このコードでは、主要なパラメータ値をセレクトしています。（整理のためひとつずつ縦に並べています。）

それぞれの役割は、

preload=none：Webサイトを開いたとき、動画を裏側で読み込むかどうか操作できます。noneの指定で事前読み込みを行いません。
playsinline=1：iOSでYouTubeの埋め込み動画を再生すると、自動的に全画面表示へと切り替わりますが、この設定を加えると全画面への自動切り替えが行われません。
rel=0：動画終了後の関連動画を非表示にします。
modestbranding=1：Youtubeロゴの表示を控えめにします。
color=whiteシークバーの色を白にします（デフォルトは赤）。
cc_load_policy=1：字幕設定をしている動画で、ユーザ側の設定に関わらず、強制的に字幕を表示します。

オプションパラメータ値の詳しい解説を見たい、また自身でカスタマイズしたい場合には、下記のリンクを参考になさって下さい。

Youtube IFrame - カスタマイズオプション（パラメータ）

ちなみに、

allowfullscreen frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

の部分は、デフォルト値のままで変更なし、で問題ないと思います。機能などについては、下記のリンクをご参照下さい。

Youtube IFrame - カスタマイズオプション（プロパティ）

Output

コードの出力結果です。この時点では、オプション値以外、最低限の装備です。

レスポンシブなプレイヤーの縦横比変更

縦横比変更のメリット

スムーズなプレイヤーの縦横比変更により、異なるデバイスや画面サイズに対応し、視聴体験を向上させます。

動画によって縦横比は様々だと思います。また、敢えて１：１など、自身で設定したい比率もあるかと思います。ここでは、そういった条件にフレキシブルに対応し、ブラウザウィンドウの変化にもレスポンシブに稼働するプレイヤー画面を設定します。

<div class="kontena">
  <div class="responsive-kontena">
    <iframe>IFrameプレイヤーコード</iframe>
  </div>
</div>

.kontena {
  max-width: 600px;  /* プレイヤーの最大幅 */
  margin: 0 auto;
  overflow: hidden;
}
.responsive-kontena {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9に縦横比を設置 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.responsive-kontena iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上記のコードを追加しました。

<iframe>コードを、ふたつのディビジョン（div）で囲んで、それぞれにCSSで主に画面比や配置の設定を行っています。

このHTMLとCSSコードは、YouTubeの動画プレイヤーをレスポンシブに設置するためのものです。以下に各部分のポイントと解説を示します。

ポイントと解説

クリックで詳細な解説の開閉

<div class="kontena">
- プレイヤーを包む外側のコンテナです。
- max-width: 600px;：プレイヤーの最大幅を指定しています。たとえば、ブログの記事幅がこれより広い場合でも、プレイヤーの幅は600pxを超えません。iframタグ内でこれより広いwidth幅を指定していても、ここの数値を超えることはありません。
- margin: 0 auto;：左右の余白を均等にして中央に配置します。marginプロパティの値がautoに設定されると、残りの空間を均等に分配して要素を中央配置する働きがあります。このプロパティは要素がブロック要素である場合に有効であり、iframeはこの条件を満たし、適切な中央配置のためのプロパティということになります。 ※テキストなどと違い、iframeはインラインフレームを表すブロック要素であるため、text-align: centerは無効となります。
- overflow: hidden;：コンテンツが .kontena の境界を超えて表示されないようにし、デザインの一貫性を保ち、不必要なスクロールバーの表示を防ぎます。
<div class="responsive-kontena">
- <div class="kontena">配下でプレイヤーを包むレスポンシブなコンテナです。
- position: relative;：このコンテナ内で絶対配置された要素に対して基準となる位置を指定します。
- width: 100%;：親要素に対して100%の幅を持つようにします。
- padding-top: 56.25%;：.responsive-kontena要素の高さの56.25%分、上側に余白（padding）を設けます。この余白により、箱の中身が高さを確保します。iframe要素がこの高さに配置されると、それによりアスペクト比が保たれます。つまり、アスペクト比を維持しながら、高さと横幅を確保する｛16:9の縦横比（9/16=0.5625）を維持する｝ためのトリックです。この数値を変動して、プレイヤーの縦横比をカスタマイズします。100%なら１：１、75%なら４：３、という訳です。
- display: flex;, justify-content: center;, align-items: center; は、それぞれFlexboxレイアウトを制御するスタイルであり、これらを組み合わせて子要素（ここでは iframe）を親要素（ここでは .responsive-kontena）の中央に配置するために使用しています。
  - display: flex：要素をFlexコンテナにします。これにより、子要素（<iframe></iframe>）を、flexアイテムとして配置できるようになります。
  - justify-content: center：Flexコンテナ内のflexアイテム（ここでは iframe）を、水平方向に中央（center）配置します。
  - align-items: center：Flexコンテナ内のflexアイテムを、垂直方向に中央配置します。
- z-index：要素の重なり順を指定します。値が大きいほど、要素が重なったとき前面に表示されます。
.responsive-kontena iframe
- position: absolute;：この要素（iframe）が親コンテナ内で絶対配置されることを示します。
- top: 0; left: 0;：親コンテナの左上に要素を配置。
- width: 100%; height: 100%;：親コンテナ全体を覆うように要素を広げます。

このコードの組み合わせにより、プレイヤーはレスポンシブに表示され、異なるデバイスや画面サイズに対応します。padding-topのパーセンテージを変更することで、縦横比を調整できます。

~【徹底解説】YouTube埋め込み時のカスタマイズ：動画を魅力的に見せる技5つ ~

キャプションとディスクリプション

その意図と効果

YouTube動画埋め込みにおいて、キャプションとディスクリプションは本来関係ないですが、これをわざわざ追加することにはいくつかの意図や目的、効果があります。

情報の提供と補足
- 意図: キャプションとディスクリプションは、動画の内容やコンセプトに関する追加情報を提供するために利用されます。
- 効果: 視聴者は動画の内容をより深く理解しやすくなります。特に、動画の内容が専門的であったり、詳細な情報が必要な場合、キャプションとディスクリプションは視聴者にとって有益な情報源となります。
SEO（検索エンジン最適化）向上
- 意図: キャプションとディスクリプションにキーワードや関連キーフレーズを含めることで、動画の検索エンジンにおける可視性を向上させます。
- 効果: 検索エンジンはテキスト情報を理解しやすいため、これらの追加情報を通じて動画が関連するキーワードで検索されやすくなります。これにより、動画の発見性が向上し、視聴者数が増加する可能性があります。
視聴者のエンゲージメント促進
- 意図: キャプションとディスクリプションは視聴者に対してコール・トゥ・アクション（CTA）を含め、コメントやシェア、購読などのエンゲージメントを促進します。
- 効果: 視聴者が動画に対してアクションを起こしやすくなり、コミュニケーションの促進やコンテンツの共有が増えることで、チャンネルの成長が期待できます。
アクセシビリティ向上
- 意図: キャプションとディスクリプションは、聴覚障害のある視聴者にとって非常に重要であり、動画の内容を理解するための手段となります。
- 効果: 情報をテキストで提供することで、聴覚障害のある視聴者も動画を理解できるようになり、視聴者層を広げることができます。