YouTube動画埋め込みをレスポンシブ対応させる方法！埋め込みコードの取得は？

この記事ではYouTube動画の埋め込みテクニックをご紹介していきます。ご自身のブログやWebサイトでYouTube動画を埋め込む際、非常に有効なテクニックです。このテクニックを使って、ブログやWebサイトのクオリティーをあげて、クリック数をさらに伸ばしていくことも可能です。

それでは初心者の方に【YouTube動画の埋め込み】とは一体どういうものか紹介させて頂きます。下記の画像を見てみましょう。こちらはYouTubeの埋め込みのサンプルを表示している、Webサイトになります。

このようにWebサイトなどに、YouTubeの動画をそのまま埋め込むことが可能です。ですが、このYouTubeの埋め込みには、【html】【iframe】【CSS】【タグ】【埋め込みコード】【パラメータ】など様々なテクニックが必要になります。なにやら難しい単語が出てきましたが、簡単に覚える事ができますので、初心者の方も安心して下さいで。
 

YouTuberを目指している方は【YouTube動画の埋め込み】を知っておくと、自身のブログでも告知ができます。また自分のブログを持っていて動画でメッセージを発信したい人にとっては、とても便利なツールです。それではまずYouTubeの埋め込みコード（htmlタグ)とは一体どういったものなのでしょうか？早速見ていきましょう。
 

それでは【YouTube動画の埋め込みコード（htmlタグ)】について説明していきましょう。【YouTube動画の埋め込みコード（htmlタグ)】とは、YouTubeの動画が持っているオリジナルのURLのようなコード（htmlタグ)の事になります。

それぞれのYouTube動画が違ったコード（htmlタグ)を持っています。まずはこの【YouTube動画の埋め込みコード（htmlタグ)】が動画の埋め込みには必要になってきますので、【動画の埋め込みコード（htmlタグ)の取得方法】を紹介していきます。

動画の埋め込みコード（htmlタグ)の取得方法ですが、取得自体は非常に簡単です。まずはYouTubeの動画ページを開きましょう。YouTubeの動画ページが開いたら、スクリーン下部、動画タイトルの右側に【共有】タブがあるので、クリックしましょう。

【共有】タブをクリックすると、下記の画像のようなポップアップがでてきます。”リンクの共有”のリストの中にある【埋め込む】をクリックしていください。

【埋め込む】をクリックすると、下記のポップアップが出てきます。このポップアップの右側部分にあるのが、YouTube動画の埋め込みコード（htmlタグ)になります。右下の【コピー】をクリックすると、埋め込みコード（htmlタグ)がコピー出来ます。

普段YouTubeを見るだけのユーザーは【YouTubeの動画の埋め込みコード（htmlタグ)】自体、見た事がない方が多いかもしれません。しかし、このように簡単に埋め込みコード（htmlタグ)は取得が可能なのです。それでは早速、ここでコピーした埋め込みコード（htmlタグ)を使って、ブログやサイトに動画の埋め込みをしていきましょう。

それではYouTube動画をブログやサイトに埋め込む方法をご紹介していきます。

先ほど紹介したYouTube動画埋め込みコード（htmlタグ)のコピーの方法のおさらいです。まずは動画ページから【共有】タブクリック＞埋め込みコード（htmlタグ)のページへジャンプします。右下部分に【コピー】タブがあるのでクリックします。すると画面右下に【リンクをクリップボードにコピーしました】と表示されます。これでコピーが完了です。

また埋め込みコード（htmlタグ)自体を【ctrl+C】を使ってコピーする事も可能です。使い慣れている方法でコピしていきましょう。あとはご自身でお使いのWEBページへ埋め込みコード（htmlタグ)をコピーすれば、YouTube動画の埋め込みが完了です。

続いて動画サイズの調整方法です。それぞれのWebサイト上のサイズが異なるので、動画サイズの縦幅、横幅を調整して、ご自身のWebサイトのサイズに合わせて動画を埋め込むと綺麗に表示されます。必須ではありませんが、Webの見た目が格段に上がります。それでは早速サイズの調整方法を確認していきましょう。

埋め込み動画のサイズ数値は、コードの中に表記されています。下記のコードの赤字部分を見てください

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

埋め込みコードの先頭"iframe"以降の【width="560" height="315"】この部分。こちらが動画サイズの数値になります。この数字のを変更する事で、埋め込み動画のサイズ変更が可能になります。ご自身のブログやWebサイトにあわせたサイズに変更してみましょう。

例えばブログの横幅サイズ(Width)が718px、縦幅サイズ(height)359pxが構成上適正なサイズな場合は下記のような埋め込みコードになります。

【<iframe width="718" height="359" src="https://www.youtube.com/embed/_mkiGMtbrPM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>】となります。

ご自身のWebサイトから適正な横幅を調べて【width(横幅サイズ)】から挿入し、【height（縦幅サイズ)】を調整しながら埋め込んでいくと、上手に動画の埋め込みが出来ますので、ぜひ試してみてください。

YouTube動画をCSSでレスポンシブ対応にする方法をご説明していきましょう。CSSを使ってレスポンシブ対応するとは？と思っている方も沢山いると思いますので、【CSS】【レスポンシブ対応】についてまずは解説していきます。

CSSとはプログラミング用語です。【html】で作られたWebページの文字や背景色、画像配置に効果を与えるためにCSSが使われます。

CSSを使わず【html】だけでWebページを作ると、テキストや画像、リンクはなどは全てページの左詰めて表示されてしまいます。CSSで効果をつけることで、見やすいWebページやデザイン性に富んだページをつくることが可能になります。つまりWebサイトを作成する際にCSSは必須ということになります。

「レスポンシブ」とは、パソコンやタブレット、スマホなどの異なる画面サイズに最適化して表示させる事を指します。現在はパソコン、スマホ、タブレットによって各htmlファイルを複数のサイズを用意して制作する方法が一般的です。

YouTube動画をCSSでレスポンシブ対応させるために、デバイス毎にCSSコードを複数用意する必要はありません。それでは早速、YouTube動画をCSSでレスポンシブ対応にする方法を解説していきます。シンプルにYouTube動画をCSSでレスポンシブ対応にする方法をみていきましょう。

先ほど紹介した、YouTubeから埋め込みたい動画の埋め込みコードをコピーして記事に貼り付けます。そのコードをYouTubeクラスを付け加えてdivタグで囲みます。早速CSSコード例をみてみましょう。
 

<div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/動画URL"  </div>

これで基本的な横幅サイズのCSSレスポンシブ対応は可能になります。

続いてYouTube動画埋め込みに便利な各種パラメーターを紹介していきます。複数のパラメーターを使いこなすことで、埋め込み動画のオプションを増やしていくことが可能です。それでは各オプションをリストにまとめてみましたので見ていきましょう。

• 【動画タイトルの表示/非表示にする】
• 【再生終了後の画面で、関連動画を非表示にする】
• 【動画終了後に自動再生をする】
• 【動画をループ再生させる】
• 【動画の途中、指定した部分から再生させる】
• 【動画の再生中に、指定した部分で停止させる】
• 【時間指定した部分だけ再生させる】

この便利な機能は、動画埋め込みコード内を修正、コードの追加をすることで可能になります。では早速個別に方法を解説していきます。

動画タイトルの表示/非表示のパラメーターを使って動画を埋め込む方法をみていきましょう。

動画のタイトルを非表示にするメリットですが、動画タイトルには、YouTube動画ページへのリンクURLが入っています。謝ってタイトルをクリックして、YouTube動画に飛んてしまわないようにする為に有効な手段です。また動画の見た目もシンプルになるといのも１つのメリットです。

動画のタイトルを非表示にする為のタグですが、【?showinfo=0】をURLの動画IDの後に挿入します。それでは先ほどの動画の埋め込みコードに追記してみましょう。下記サンプルを確認してください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?showinfo=0" frameborder="0"allowfullscreen></iframe>

これでタイトルの非表示化が完了です。もしタイトルを表示したい場合は追加したコードを削除すれば、タイトルが表示されるようになります。

再生後の関連動画を非表示にするパラメーターのメリットですが、埋め込み動画でも動画が再生終了後には、通常のYouTubeページと同じように、関連する動画がスクリーンに表示され、関係のない動画にリンクされてしまう可能性があります。

こちらも見た目自体がシンプルになるので、Webサイトの特色などを考えて、非表示化することで、ページのイメージ、印象が違ってきますので試してみてください。

再生後の関連動画を非表示にする為のタグは、先ほどと同じように動画URLの後ろに【?rel=0】を挿入します。下記のサンプル埋め込みコードを見てみましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?rel=0" frameborder="0"allowfullscreen></iframe>

これで動画再生後に関連動画が表示されなくなります。関連動画が表示されるのが嫌な方は試してみましょう。

自動再生させるパラメーターはとても便利なオプションです。埋め込み動画はWebページが読み込まれても、自動再生出来ないように初期設定されています。自動再生する為には、先ほどと同じように動画URLの後に【?autoplay=1】を挿入しましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?autoplay=1" frameborder="0"allowfullscreen></iframe>

これでWebページが読み込まれ次第、YouTube埋め込み動画が自動再生されるようになります。１点注意しなければならないのが、意図しない状況で動画が自動再生されると、音声も同時に自動再生されます。

ページリンクなどに、”動画が自動再生されます”または"音声が自動再生されます"などの注意書きがされていないと、ユーザーが不快に思うことも十分に有り得ますので、自動再生をする場合は細心の注意を払うように心がけてください。

続いて埋め込み動画をループ再生させるパラメーターですが、この方法を使うとWebページやブログに埋め込んだ動画が手動でストップしない限りループ状態で自動再生されます。プレイヤーの非表示タグと併用すると、ユーザーが再生を停止することが出来ないので、十分に注意して使用していください。この機能自体は、限定的な使い方になることが多いです。

動画をループ状態で自動再生させる為のタグは【?loop=1&playlist=動画URL】となります。先ほどまでと違うのは、タグの後に動画URLを再度挿入する必要がありますので、忘れずに挿入しましょう。それでは挿入した下記サンプルの動画埋め込みコードを確認してください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM"?loop=1&playlist=_mkiGMtbrPM"frameborder="0"allowfullscreen></iframe>

先ほどお伝えした通り、この埋め込み動画をループさせるオプションはかなり限定的な使い方しか出来ません。例えば、後ほど紹介するプレイリストなどを埋め込む方法と併用させて、自動再生させて使うなどの目的では有効かもしれません。ご自身のWebサイトで必要になる場合もあると思いますので、豆知識程度で覚えておくと良いでしょう。

埋め込み動画を、動画の再生時間の途中から再生するパラメーターの紹介です。長時間の動画のワンポイントだけを埋め込みたい場合に、非常に便利な機能になります。例えば長時間の作業用BGMや、音楽BGMの長時間リミックスなどのワンポイントを埋め込みたい場合がよくあると思いますが、そういった場合に使っていくと良いでしょう。

途中から動画再生させ方法のタグですが、いつも通り動画URLの後に【?start=秒数】を挿入します。”秒数”は動画を再生したい経過秒数です。例えば動画の1分30秒(90秒)のところから動画を再生したい場合は【?start=90】となります。早速下記サンプルをみていきましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?start=90"frameborder="0"allowfullscreen></iframe>

埋め込み動画を途中で停止させるパラメーターも、動画途中から再生させる方法と同様、とても使い勝手が良いのでオススメの方法です。しっかりと覚えておきましょう。埋め込み動画を途中で停止させるタグは【?end=秒数】となります。先ほどの動画途中から再生させる方法と一緒で、停止させたいポイントの秒数を入れていきます。

それでは下記にサンプルの埋め込みコードを記載しておきますので、確認して下さい。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?end=90"frameborder="0"allowfullscreen></iframe>

埋め込み動画を途中から再生させる方法の【start】の部分を【end】にするだけなのでとても簡単ですね。両方のタグはかなり使いやすいため、コンスタントに使うシーンがあるでしょう。しっかりとタグを覚えておきましょう。

埋め込み動画の部分だけ再生させるパラメーターは、埋め込み動画を途中から再生、停止する方法の合わせ技のようなタグになりますので簡単に覚えることができるかと思います。こちらもとても便利な機能で、どちらかといえば、このタグの方が使う頻度は高いかもしれません。

埋め込み動画の部分だけ再生させるためのタグは【?start=秒数&end=秒数】となります。秒数には今まで通り、開始したい秒数、停止した秒数を入れるだけです。それでは早速サンプルの埋め込みコードをみていきましょう。今回は動画開始時間を1分30秒、動画終了時間を10分として作っています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?start=90&end=600"frameborder="0"allowfullscreen></iframe>

これで埋め込み動画を再生すると、1分30秒のところから自動再生され、動画が10分を過ぎたところで自動停止します。

続いてYouTube動画埋め込みに使えるちょっと高度なパラメーターを紹介していきましょう。かなり細かい設定まで出来るので、埋め込み動画はこだわりたい、という人はよく覚えておくと便利です。

埋め込み動画の画質指定がパラメーターを使用することで可能になります。高画質設定にすると、Webページやブログページは重たくなり、低画質設定にすれば読み込みは軽くなります。スマホなどのデバイス用にWebサイトを作る、PC用で作る、というような場合に、画質指定をしておくことで、ユーザーにとって優しいWebページを作ることが可能となります。

画質を指定する場合のタグは【?vq=値】となります”値"の部分には画質のレベルが入ります。画質レベルのタグは下記の通りになります。

• highres
• hd1440
• hd1080
• hd720
• large(480p＝854×480ピクセル)
• medium(360p＝640×360ピクセル)
• small(240p＝427×240ピクセル)

largeは480p/854×480ピクセル、mediumは360p/640×360ピクセル、smallは240p/427×240ピクセルとなります。【hd1080】でタグを作りたい場合は【?vq=hd1080】となります。1080px指定で埋め込みコードをサンプルで作ってみましたので、参考にしてみてください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?vq=hd1080"frameborder="0"allowfullscreen></iframe>

字幕を表示するパラメータータグは、動画URLの後ろに【?cc_load_policy=1】を挿入します。埋め込み動画は基本的に字幕が自動表示されません。海外の動画などを埋め込む場合に非常に便利です。

動画に表示される言語も指定可能です。今回は英語、日本語の字幕表示の２パターンをみていきましょう。まずは基本タグの【?cc_load_policy=1】を挿入したバージョンです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?cc_load_policy=1"frameborder="0"allowfullscreen></iframe>

この字幕表示の基本タグを入れると、画像のように英語字幕が出てきてしまうことがあります。

日本語字幕を表示したい場合は【?cc_load_policy=1&cc_lang_pref=ja】この赤字の部分を追記しましょう。

このように日本語の字幕が表示がされます。動画によっては日本語字幕に対応されていないものもあります。そういった場合、日本語字幕は表示されませんのでご注意ください。

アノテーションとは、YouTube動画スクリーン上に表示される、リンクやSubscribeボタンのことです。広告を消そうと思ったら、間違ってリンク先に飛んでしまうなど面倒な存在です。これを非表示にするパラメータータグは【?iv_load_policy=3】となります。

現在のところアノテーション自体あまり使われていません。YouTube動画の終了画面とカードという機能が加わったことが理由です。そのためそこまで出番は多くはないと思いますが、念の為覚えておきましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?iv_load_policy=3"frameborder="0"allowfullscreen></iframe>

YouTubeの動画はキーボード操作(ショートカットキー)が可能なのです。※詳細は下記のリンクを参照下さい。キーボード操作を無効にするパラメータータグは【?enablejsapi=1】となります。

Webページ閲覧時に、"↑"”↓"などのキーボード操作で画面スクロールする際に邪魔になってしまうことがあります。こちらも出番は多くはないかもしれませんが、覚えておきましょう。

また【自動再生設定】と【リピートで自動再生】をセットで使う場合は、【キーボード操作】または【画面上のコントローラー表示】のどちらかは有効にしておきましょう。有効にしておかなければ、自動再生になっているので、埋め込み動画を止められなくなってしまいます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/_mkiGMtbrPM?enablejsapi=1"frameborder="0"allowfullscreen></iframe>

注意しておきたいポイントとして、下記の画像のように埋め込みコードの欄に「リクエストによる埋め込み無効」と表示されている動画に関しては、動画のコードを変えても、ブログなどに埋め込み出来ません。

企業が動画の運営元の場合、埋め込み無効が最近増えてきている傾向にあります。またYouTuberが投稿している動画も同様に埋め込み無効の増加が目立ちます。理由はWebサイトに動画を埋め込んでも再生数がカウントされない事(収益が上がらない）、または著作権などの問題があるようです。

いかがでしたでしょうか？基本的に全てのパラメーターのタグ付けは動画URLのすぐ後ろに挿入するのは変わりません。動画の自動再生など便利なので一度覚えてしまえば、簡単に応用出来るのですが、覚えるまではこのページをブックマークに入れて保存しておきましょう。

今回紹介した方法を使って、早速YouTube動画埋め込みをブログやサイトに活用していきましょう。以上【YouTube動画埋め込みをレスポンシブ対応させる方法、埋め込みコードの取得方法】のご紹介でした。