YouTube動画の埋め込み方法とレスポンシブ対応にする方法

これから、YouTubeの​​​​​​​動画と再生リストを埋め込みについて、ウェブサイトやブログに YouTube の動画や再生リストを埋め込んで追加できることについて紹介して行きます。

簡単にYouTubeの動画を埋め込みの方法を紹介して行きます。

まず、パソコンで、埋め込みたい YouTube 動画に移動して、動画の下にある [共有]  をクリックし、[埋め込みコード] をクリックします。

そして、ボックスに表示されているYouTubeの HTML コードをコピーして、ブログやウェブサイトの HTML にコードを貼り付けます。

また、YouTube​​​​​​​の再生リストを埋め込みの方法も紹介します。まず、パソコンで YouTube アカウントにログインします。

​​​​​​​ページの左側で、埋め込みたいYouTube​​​​​​​の再生リストを選択します。

次に、URL から再生リスト ID をコピーして、次の手順に沿って個々の動画の埋め込みコードを変更し、動画 ID の代わりに（「embed/」の後に）、「videoseries?list=」を入力します。

さらに、次に「=」の後に再生リスト ID を貼り付けて、ブログやウェブサイトの HTML にコードを貼り付けます。

ここでは、YouTube/ユーチューブの動画を埋め込む方法(iframe)について紹介して行きたいと思います。

まず、埋め込みたいYoutubeの画面を呼び出して、タイトルの下にある「共有」をクリックしてください。

そして、クリック後さらに表示されるボックス内の「埋め込みコード」をクリックしましょう。

そうすると、一番下の枠にYouTubeのHTMLタグが出ましたが、これが、埋め込みたいYouTube​​​​​​​の動画のHTMLコードなのです。

そして、それをコピーしてサイトやブログに直接コピペしてもいいのですが、冒頭で言ったように、せっかくアップしても端末によって尻切れとんぼになってたりします。

また、スーパービックサイズになってたりしたら悲しすぎるということで、自分なりにカスタムしてください。

まずは、すでに埋め込みたいサイズが決まっている場合は自分で指定できます。

また、YouTubeの​​​​​​​HTMLコードの直下にある「もっと見る」をクリックして、上図のような表示がでてくるので、YouTube​​​​​​​の「動画のサイズ」のプルダウンを表示させ、カスタムサイズを選択しましょう。

そして、枠の中に任意の数字を入れるのですが、他の設定してある数字を見ると全てのサイズは、幅：高さ＝16 : 9になっていて、この比率はできるだけ変えないほうがいいです。

また、YouTubeでも推奨されるアスペクト比として「16:9」を推奨しています。

加えて、サイトに埋め込んだあとサイズだけ変えるなら、width（幅）とheight（高さ）の数字だけ変更可能ですし、他のチェックの選択肢は好きなように設定して下さい。

また、Youtubeは2017年8月にデザインを一新したため、方法が若干変わり、ここから下は、最新バージョンのコードのコピーの方法も紹介します。

そして、goodやbadの指マークの横に「共有」の文字が表示されているのでクリックして、画像のようなボックスが表示されるので、「埋め込む」をクリックしてください。

さらに、コードが表示されるので、コピーしてサイトにペーストして、開始位置は秒数を指定することによって、出だしを調整できるのでお好みで設定して下さい。

また、埋め込みオプションもお好みで設定についてです。

そして、以前のバージョンでは動画のサイズを最初からカスタムできましたが、その項目がなくなっているので個人でコード内の”width”と”height”を書き直します。

加えて、コードの取得方法以外は変わらないので、これ以降は上に戻って「幅：高さ=16:9」のところから参照して下さい。

または、YouTubeの​​​​​​​関連動画を非表示して、関連動画を表示（デフォルト）で、このパラメータに関しては、YouTubeの埋め込みコード部分に「動画が終わったら関連動画を表示する」という項目があります。

また、その項目のチェックを外せば?rel=0が追記されたコードが出力され、コントロールの表示・非表示についてです。

そして、デフォルトではYouTube​​​​​​​の画像のように再生・音量・残りの秒数などといった項目が表示されているコントロール部分は、「controls」を使うことで表示・非表示を制御することができます。

したがって、コントロールを非表示にしたいときは、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?controls=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>

または、コントロールを常に表示して、デフォルトでは動画を再生後にプレーヤーからマウス（フォーカス）を外すとコントロール部分は自動的に隠れています。

そして、再度プレーヤーにマウスを持っていくとコントロールが表示されるという動きですが、「autohide」を使うことで制御することができます。

または、コントロールを常に表示させたいときは、srcの末尾に以下のように記述します。

<iframe src="//www.youtube.com/embed/xxx?autohide=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>

そして、記述を、autohide=2にした場合は、?autohide=0と同様にコントロールが常に表示されつつ、プログレスバーのみが少し目立たなくなるという動きになります。

または、動画タイトルや評価情報などの表示・非表示についてです。

ここでは、デフォルトでは画像のようにプレーヤー上部に動画タイトルや評価情報などが表示されますが、「showinfo」を使うことで表示・非表示を制御することができます。

また、タイトルや評価情報などを非表示にしたいときは、srcの末尾に下記のように記述します。

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

実際に、フルスクリーンボタンの表示・非表示についてです。

そして、デフォルトでは画像のようにプレーヤー右下にフルスクリーンボタンが表示されますが、「fs」を使うことで表示・非表示を制御することができます。

また、フルスクリーンボタンを非表示にしたいときは、srcの末尾に下記のように記述します。

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

さらに、この方法は単純にボタンを非表示にするだけであって、フルスクリーンが無効になったわけではありません。

それでは、早速YouTubeで関連動画を消す方法の手順と方法を紹介していきますし、今回ご紹介する方法は2つあり、どちらも比較的簡単にできます。

そして、YouTubeの関連動画を消すことによってユーザビリティが向上することが期待できると思う際にはぜひおすすめします。

そして、YouTube動画の埋め込みコードを取得する方法ですが、サイトなどにYouTube動画を埋め込みコードを取得する際に、以下の手順からYouTube​​​​​​​の関連動画を非表示にすることが可能です。

まずは、YouTubeの埋め込みコードをクリックして、「もっと見る」をクリックして詳細メニューを出してください。そして、「動画が終わったら関連動画を表示する」のチェックを外してください。

また、埋めこみコードをコピーして貼り付けるだけで完了で、チェックが外れていることを確認して、あとは埋め込みコードをコピーして、サイトに埋め込みするだけで完了なのです。

また、すでにサイトに埋め込んであるYouTubeに、少しタグを追加してYouTubeの関連動画を非表示にすることも可能です。

そして、htmlをいじったことないことや、失敗しそうで怖いという方は、一つめに紹介した方法をお勧めしたいと思います。

さらに、YouTubeの埋め込みタグを以下のように、少し修正するだけで改善することができますし、YouTube​​​​​​​の関連動画が表示されてしまうコードはこちらです。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/X0EKA7dMQH0″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

または、YouTubeの関連動画の表示を消すコードはこちら。(修正後)は以下です。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/X0EKA7dMQH0?rel=0” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
 
そして、YouTubeの埋め込みURLの最後に、?rel=0を追記するだけでOKです。

または、YouTubeの​​​​​​​関連動画の表示・非表示についてです。

そして、記事冒頭にあるサンプルソースをそのまま使用した場合、YouTube​​​​​​​の動画の再生後にYouTube​​​​​​​の関連動画が出てくるのですが、それの表示・非表示を制御する方法です。

さらに、場合によってはそのまま使用することもあるかもしれませんが、ほとんどの場合は意図しないものが表示される理由などで非表示にしたいことが多いと思います。

加えて、表示・非表示を制御するには「rel」を使用し、YouTube​​​​​​​の関連動画を非表示にしたい場合はsrcの末尾に下記のように記述します。

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

紹介するCSSでのレスポンシブについてです。ここでいう、CSSでのレスポンシブ対応とは、スマホなど様々な端末ごとのスクリーンサイズに最適化させるという意味です。

CSSでのレスポンシブがどういうことかというと、つまり、CSSの一番いいサイズに自動で変えてくれるということで、元のCSSのHTMLコードを少し変えて、さらにCSSを追記します。

または、WordPressの方はCSSを特定のページだけに追記するCSSでのレスポンシブの方法も参考にして下さい。

CSSの意味を理解しながら読み進めてください。

また、CSSでのレスポンシブのサイズ指定されているとレスポンシブ対応ができないので、<iframe width=”1280″ height=”720″ src=”https://www.youtube.com/embed/y3vCCXtNl7c”

frameborder=”0″ allowfullscreen></iframe>

からCSSでのレスポンシブの「width=”1280″ height=”720”」を削除し、その後にそのレスポンシブの埋め込みコードを<div class=“video”></div>で挟みます。

また、CSSでのレスポンシブのclass名の”video”は”youtube”でも何でも分かりやすいレスポンシブの名前に変更可で、さらにCSSに追記します。

そして、親要素をCSSでのレスポンシブに相対配置にして、レスポンシブの動画を埋め込むiframeは絶対配置でサイズ100%指定です。

または、padding-bottomは先述した、幅：縦＝16 : 9 というところから、9/16×100=56.25%で、このように設定しておけば、どんなCSSでのレスポンシブの端末でもそれにあわせた最適なサイズになります。

または、ブログサイトに作成した再生リストへ、YouTubeの動画を追加する方法を説明します。

そして、まずは、ブログサイトに再生リストへ追加したい動画のページを開き、再生リストへの追加ですが、動画の下にあるボタンの中に、横線に+と書かれているボタンがあります。

これがブログサイトに再生リストへの「追加」ボタンになるので、クリックすると、メニューが開き、再生リスト一覧が表示されます。

また、ブログサイトに動画を追加したい作成した再生リストの左に表示されているチェックボックスをクリックし、オンにし、今開いている動画ページの左下に「再生リストに追加しました」とポップアップが表示されます。

そして、これでブログサイトに動画を再生リストの設定に追加することでできました。

または、いくつかブログサイトに動画設定を再生リストに追加したら、Youtubeメニューの「ライブラリ設定」から、再生リストをクリックして登録できているかチェックしてみましょう。

さらに、ブログサイトに登録できていれば、画像のように登録順にリストアップされているはずで、再生リストに登録した動画は「すべて再生の設定」をクリックすることで自動的に再生されるようになるでしょう。

加えて、アーティストのミュージッククリップをまとめたブログサイトに再生リスト設定を作れば、ミュージックプレイヤーのプレイリストのようになります。

ここでは、ブログサイトに再生リスト設定の編集画面から追加についてです。

まず、ブログサイトに再生リストの編集設定画面から、直接動画を追加することも可能で、編集設定画面の右側にある「動画を追加」ボタンをクリックしてみましょう。

次に、キーワード設定検索、直接動画のURLを入力する、自分のアップロードした動画の中から選択する、の3つの方法から動画を再生リストに登録してください。

そして、ブログサイトに設定された動画をクリックして選び、左下の「動画を追加」ボタンをクリックすれば再生リストに追加されます。

ここでは、YouTube/ユーチューブの動画をカスタマイズして埋め込む方法～再生編～について紹介します。

まず、カスタマイズとして、長編の動画の中で、スポーツ動画の決定的シーンなど、ある決まった場面から再生させたい場合は、カスタマイズした動画の開始時間を指定して再生する事ができます。

続いて、カスタマイズした【追加コード】です。start=再生開始位置（秒数）

また、カスタマイズした【追加後の埋め込みコード】ですが、（「＜」と「＞」を半角にしてください）。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?start=40" width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

また、指定位置からの再生と同じ様に、指定位置で動画の再生を止める事ができます。

さらに、よく、サイト誘導のために最後の決め場面を長く作っている動画を見かけますが、このパラメーターを使えば、その必要はありません。

そして、設定方法は「指定位置からの再生」と似ていて、「end=再生停止位置（秒数）」のパラメータを付加すれば良いだけです。

ここで、カスタマイズした【追加コード】は、end=再生停止位置（秒数）です。

そして、カスタマイズした【追加後の埋め込みコード】は、（「＜」と「＞」を半角にしてください）。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?end=50" width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

ここでは、指定の区間だけを再生させたい場合についてです。

それでは、動画の特定の区間を再生させたい場合、上記２つのコードを組み合わせる事で任意の箇所の再生が可能になります。

カスタマイズしたコードは、動画の20秒～30秒の区間を再生をしたい場合の埋め込みコードになります。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?start=20&end=30" width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

ここでは、サイト訪問者に余計なクリックをさせたくない場合や、YouTubeの動画を必ずみて欲しいなど、自動的にYouTube​​​​​​​の動画を再生させたいというニーズもあるかと思います。

また、そのような場合は、以下のコードを追加すると、YouTube​​​​​​​の​​​​​​​動画が自動的に再生されます。

紹介する、カスタマイズした【追加コード】は、autoplay=1です。

また、カスタマイズした【追加後の埋め込みコード】は、（「＜」と「＞」を半角にしてください）。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

YouTubeの​​​​​​​動画をループ再生させるには、YouTube​​​​​​​の関連動画を非表示にしてそのままストップするのではなく、自動的にまた先頭から繰り返し再生させたい場合もあると思います。

また、その場合には、以下のコードを追加してください。

それは、カスタマイズした【追加コード】のloop=1です。

ここでは、YouTube/ユーチューブの動画をカスタマイズして埋め込む方法～表示編～について紹介します。

まずは、「アノテーション」とは、動画の上に被せるように配置されているクリックできるボタンのことです。

そして、YouTubeの動画を止めようと思ってクリックしたとすると、それがYouTube​​​​​​​のアノテーションだったりすると面倒だと思います。。

<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

?iv_load_policy=3を追記すると、アノテーションが非表示になりますが、意外と出番はないし、アノテーションが多すぎる動画に使うくらいだと思います。

また、Youtubeの動画はキーボードで操作できる上、これはブログなどに埋め込んだ動画も同じで、このキーボード操作を無効化する方法があります。

<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

?enablejsapi=1を追記します。

または、これで埋め込んだ動画をキーボードで操作出来なる上、どちらかと言うと不便になってしまうのであまり使わないと思います。

さらに、基本的に埋め込んだ動画には字幕って表示されない上、コントロールから字幕設定すれば表示されるが、この手間を省いて最初から字幕を出してほしい場合です。

<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

また、URL部分のすぐ後ろに?cc_load_policy=1を追記して、これで字幕が表示されますが、見ての通り「英語」で表示されてしまうことがあります。

これは、恐ろしくマニアックな機能で、こんな仕様も用意されていて、改めてGoogleは超のつくグローバル企業なんだと体感させられます。

<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?hl=hi" frameborder="0" allowfullscreen></iframe>

また、?hl=hiを追記すると、コントロール部分の言語が「ヒンディー語」に切り替わっています。

<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?hl=de" frameborder="0" allowfullscreen></iframe>

そして、?hl=deを追記すると、「ドイツ語」に切り替わり、どのようなキーワードを入れると、何の言語に切り替わります。

全画面ボタンを非表示には、かなりマニアックな機能で、埋め込んだYoutube動画のコントロールに「全画面ボタン」を表示させない設定になってます。

<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?fs=0" frameborder="0" allowfullscreen></iframe>

そして、?fs=1を追記するだけです。

YouTubeのコードは、<iframe width="718" height="408" src="https://www.youtube.com/embed/KIViy7L_lo8?modestbranding=1" frameborder="0" allowfullscreen></iframe>です。

そして、?modestbranding=1を追記して、見ての通り、Youtubeロゴが表示されなくなるが、Youtubeさんに悪い気がするので使いません。

ここでは、YouTube/ユーチューブの動画をカスタマイズして埋め込む方法～応用編～について紹介します。

まず、非表示にするパラメータを複数組み合わせて作っています。この例の場合ですと、?rel=0、&showinfo=0、&iv_load_policy=3、&fs=0、&modestbranding=1の5つを使います。

そして、YouTubeの関連動画非表示、YouTube​​​​​​​のタイトル非表示、YouTube​​​​​​​のアノテーション非表示、全画面ボタン非表示、Youtubeロゴの非表示を行っているのです。

したがって、YouTube​​​​​​​の複数のパラメータを組み合わせる時は、必ず&を間に入れてつなぐようにしてください。

コードは、<iframe width="718" height="404" src="https://www.youtube.com/embed/9aJVr5tTTWk?

&rel=0&showinfo=0&playlist=9aJVr5tTTWk" frameborder="0" allowfullscreen></iframe>です。
 
そして、これが、出来たと思っていたら、実は勘違いでした（後日、確認したところ）、「リクエストによる埋め込み無効」が入っている動画を埋め込むのは、ほぼ不可能なのです。

まず、?listType=playlistでプレイリストを埋め込む設定にしてください。

そして、次に埋め込みたいプレイリストを選んで&list=プレイリストのURLと入力します。

したがって、最後に&index=数と入れて、再生させたい位置を決め、今回は「&index=3」なので、プレイリストの3番目から再生されるようになりました。

ここでは、YouTube/ユーチューブの動画を埋め込みオプションの管理について紹介します。

まず、プライバシー強化モードを有効にして、埋め込み動画を自動再生し、指定位置から埋め込み動画を再生開始してください。

または、埋め込み動画に字幕を追加して、動画の埋め込みを無効にしてみましょう。

ここでは、YouTube/ユーチューブの埋め込んだ動画の著作権はどうなる？について紹介します。

まず、ホームページやブログ、SNS等に動画のリンク(埋め込み動画含む）を貼ることが著作権侵害とならないかについては、従来から議論があります。

しかし、経済産業省の「電子商取引及び情報材取引等に関する準則」でも述べているように、リンクを貼ったとしても視聴者に動画データを送信するのはあくまでリンク元であるのです。

すなわち、一般的にリンクを貼る行為自体は著作権の侵害にならないと考えられているということです。

最後まで、YouTube動画の埋め込み方法とレスポンシブ対応にする方法について記事を読んでいただき、ありがとうございます。

また、YouTube/ユーチューブの動画埋め込みとは、YouTube/ユーチューブの動画を埋め込み方法(iframe)、

YouTube/ユーチューブの再生リスト/プレイリストを埋め込み方法、YouTube/ユーチューブの動画をカスタマイズして埋め込み方法～再生編～について紹介しました。