最短ホームページテンプレートでyouTube動画を最適化させる方法

最短ホームページテンプレートでユーチューブ動画を最適表示させる方法

ユーチューブ動画最適表示

訪問者さんの閲覧環境に影響されない最適表示

最短ホームページテンプレートにユーチューブ動画を埋め込む方法について解説します。ホームページに動画を埋め込んだ場合は、スマホサイトでも動画が最適表示されるように設定しておく必要があります。どのようなブラウザからでも訪問者さんが快適に閲覧できるようにしておきます。

[この動画は9分です]

Please click

チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

ユーチューブの動画の埋め込みコードを取得する

動画の上で右クリックして「埋め込みコードをコピー」をクリックする。

パソコン用テンプレートに埋め込みコードを貼る

最短ホームページテンプレートのメインコンテンツの幅はwidth="580"です。ユーチューブ動画の縦横比が16対9なので、縦幅はwidth="326"となります。

<iframe width="580" height="326" src="動画プレーヤーURL" frameborder="0" allowfullscreen></iframe>

メインコンテンツ全体に枠を指定している場合、または、動画を枠で囲う場合は、枠から動画がはみ出てしまいます。この場合は指定するサイズを調節します。指定した横幅に0.5625を掛ければ縦幅の大きさが算出できます。

スマホ用テンプレートに埋め込みコードを貼る

スマホ用にユーチューブ動画を貼りつける場合は、サイズの指定をする必要はありません。CSSから画面に合わせたサイズになるようにクラス指定を書き込みます。

スマホテンプレートのHTML
YouTubeの埋め込みコードを下記のタグで囲います。

<div class="movieinfo">ユーチューブ埋め込みコード</div>

スマホサイトで動画の横幅を最適表示させるために、スマホテンプレートの動画の埋め込みコードをクラス指定します。クラス指定というのは、スタイルシート（CSS）で指定した内容を、その専用のDIVタグで囲んだHTML側に反映させるという事です。今回はmovieinfoというクラスをスタイルシートで作成し、その命令内容をCSSに記述します。

このスタイルシートでHTML側（スマホサイト）に指示する事でmovieinfoで囲まれた範囲に命令が反映する仕組みです。※ movieinfoという名前自体は任意で決める事もできます。

スマホ用CSSにクラス指定記述

/* スマホ動画最適化 */
.movieinfo {
position: relative;
-top: 56.25%;
padding-bottom:30px;
}
.movieinfo iframe {
position: absolute;
top: 0;padding
left: 0;
width: 100%;
height: 100%;

スマホのスタイルシートに書き込むソースですが、56.25%というのがポントです。この%は動画の縦横比を定義するものです。ユーチューブの動画表示の縦横比は16対9です。要するに横幅が100%に対して、縦幅の比率を56.25%にすると、横幅の大きさに係らず常に縦横比は16対9になるという事です。

また、スマホテンプレートのメインコンテンツのテーブルがwidth: 100%;で指定されているので、width: 100%;は、ブラウザの横幅に対して100%で表示させるという事になります。上記のソースの名前はmovieinfoとしていますが、これをスタイルシートのクラス名と言います。HTMLに対してクラス指定した部分だけに、このクラスの命令が反映されます。

中身は覚えなくて結構ですので、このような技術がCSSの役割だと考えて下さい。直接HTMLでも指示できますが、CSSという外部のファイルから、簡潔にまとめて「ある命令」をHTMLに指示できるという事です。

直接HTMLでも指示できますと書きましたが、上記のCSSのソースを直接HTMLで動画ごとに書き込む事も可能です。しかしこの場合はソースは長くなりますし、動画が多いホームページではHTMLの記述が面倒になります。

このようにCSSはHTMLのソースを短くできるというメリットがあります。こうする事でSEO対策にもなります。綺麗で短いソースはファイルサイズが小さくなり、またグーグルのクローラーがサイト内を巡回しやすいためです。

2026/02/03 18:31:16