漫画の地球儀

YouTube動画の埋め込み方法、レスポンシブ対応にする方法!【pc、iframe、サイト、ブログ】

スポンサーリンク

YouTube、ユーチューブの動画埋め込み

f:id:rick1208:20200628191619p:plain
これから、YouTubeの動画と再生リストを埋め込みについて、ウェブサイトやブログに YouTube の動画や再生リストを埋め込んで追加可能なことについて説明して行きます。

ブログなどにYoutubeのサイトを出しること

f:id:rick1208:20200628193052p:plain
簡単にYouTubeの動画を埋め込みの方法を説明して行きます。

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

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

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

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

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

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

YouTubeの動画を埋め込む方法「iframe」

f:id:rick1208:20200628191553p:plain
ここでは、YouTube、ユーチューブの動画を埋め込む方法(iframe)について説明して行きたいと思います。

動画の埋め込みコードを取得する

f:id:rick1208:20200628194150p:plain
まず、埋め込みたいYoutubeの画面を呼び出して、タイトルの下にある「共有」を押してください。

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

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

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

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

横幅 、 縦幅をサイズ調整して埋め込む方法

f:id:rick1208:20200628195011p:plain
まず最初は、すでに埋め込みたいサイズが決まっている場合は自分自身で指定可能です。

また、YouTubeのHTMLコードの直下にある「もっと見る」を押して、上図のような表示がでてくるので、YouTubeの「動画のサイズ」のプルダウンを出し、カスタムサイズを選びましょう。
f:id:rick1208:20200628195018p:plain
そして、枠の中に任意の数字を入れるのですが、他の設定してある数字を見ると全部のサイズは、幅:高さ=16 : 9になっていて、この比率は可能なだけ変えないほうがいいです。

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

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

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

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

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

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

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

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

動画のタイトルを非表示にする方法

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

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

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

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


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

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

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

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

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

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

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


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

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

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


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

動画の終了後、関連動画を出しない方法

f:id:rick1208:20200628195322p:plain
それでは、早速YouTubeで関連動画を消す方法の手順と方法を説明していきますし、今回ご解説する方法は2つあり、どっちも比較的簡単に可能です。

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

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

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

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

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

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

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


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

そして、YouTubeの埋め込みURLの最後に、?rel=0を追記するだけでOKです。

プレーヤーのコントロールを非表示にする方法

f:id:rick1208:20200628195447p:plain
あるいは、YouTubeの関連動画の表示・非表示についてです。

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

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

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

CSSを利用してレスポンシブ対応する方法

f:id:rick1208:20200628195530p:plain
解説するCSSでのレスポンシブについてです。ここでいう、CSSでのレスポンシブ対応とは、スマホなど色々な端末ごとのスクリーンサイズに最適化させるという意味です。

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

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

CSSの意味を理解しながら読み進めてください。
f:id:rick1208:20200628195541p:plain
また、CSSでのレスポンシブのサイズ指定されているとレスポンシブ対応ができないので

からCSSでのレスポンシブの「width=”1280″ height=”720”」を削除し、その後にそのレスポンシブの埋め込みコードを

で挟みます。

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

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

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

YouTubeの再生リスト、プレイリストを埋め込む方法

f:id:rick1208:20200628201827p:plain
あるいは、ブログサイトに作成した再生リストへ、YouTubeの動画を追加する方法を説明します。

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

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

また、ブログサイトに動画を追加したい作成した再生リストの左に表示されているチェックボックスを押し、オンにし、今開いている動画ページの左下に「再生リストに追加しました」とポップアップが表示されます。
f:id:rick1208:20200628201835p:plain
そして、これでブログサイトに動画を再生リストの設定に追加することで可能でした。

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

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

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

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

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

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

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

YouTubeの動画をカスタマイズして埋め込む方法「再生」

f:id:rick1208:20200628201858p:plain
ここでは、YouTube、ユーチューブの動画をカスタマイズして埋め込む方法~再生編~について解説します。

動画を途中から再生させる

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

続いて、カスタマイズした「追加コード」です。start=再生開始位置(秒数)

また、カスタマイズした「追加後の埋め込みコード」ですが、(「<」と「>」を半角にしてください)。

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

動画を途中で停止させる

f:id:rick1208:20200628201948p:plain
また、指定位置からの再生と同じ様に、指定位置で動画の再生を止める事が可能です。

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

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

ここで、カスタマイズした「追加コード」は、end=再生停止位置(秒数)です。

そして、カスタマイズした「追加後の埋め込みコード」は、(「<」と「>」を半角にしてください)。

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

動画の一部分だけを切り取って再生させる

f:id:rick1208:20200628202104p:plain
ここでは、指定の区間だけを再生させたい場合についてです。

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

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

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

動画を自動で再生させる

f:id:rick1208:20200628202339p:plain

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

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

解説する、カスタマイズした「追加コード」は、autoplay=1です。

また、カスタマイズした「追加後の埋め込みコード」は、(「<」と「>」を半角にしてください)。

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

動画をループ再生させる

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

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

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

YouTubeの動画をカスタマイズして埋め込む方法「表示」

f:id:rick1208:20200628202420p:plain

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

アノテーションを非表示

f:id:rick1208:20200628202443p:plain
まず最初は、「アノテーション」とは、動画の上に被せるように配置されているクリック可能なボタンのことです。

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


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

動画のキーボード操作を無効化

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


?enablejsapi=1を追記します。

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

デフォルトで字幕を出しる

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

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

コントロールの言語設定

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

<

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


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

全画面ボタンを非表示

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

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

Youtubeロゴを非表示に

f:id:rick1208:20200628203813p:plain

YouTubeのコードは、です。

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

YouTubeの動画をカスタマイズして埋め込む方法「応用」

f:id:rick1208:20200628205145p:plain
ここでは、YouTube、ユーチューブの動画をカスタマイズして埋め込む方法~応用編~について解説します。

複数の設定(パラメータ)を組み合わせる

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

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

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

「リクエストによる埋め込み無効」の動画を埋め込む

f:id:rick1208:20200628205221p:plain
コードはです。

そして、これが、出来たと思っていたら、実は勘違いでした(後日、チェックしたところ)、「リクエストによる埋め込み無効」が入っている動画を埋め込むのは、ほぼ不可能なのです。

プレイリストを埋め込み、途中から再生する

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

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

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

YouTubeの動画を埋め込みオプションの管理

f:id:rick1208:20200628205439p:plain
ここでは、YouTube、ユーチューブの動画を埋め込みオプションの管理について解説します。

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

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

YouTubeの埋め込んだ動画の著作権はどうなる?

f:id:rick1208:20200628205511p:plain
ここでは、YouTube、ユーチューブの埋め込んだ動画の著作権はどうなる?について解説します。

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

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

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

まとめ

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

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

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