YouTubeの埋め込みコードのカスタマイズ方法を解説！

本記事ではYouTubeの埋め込みコードのカスタマイズ方法を詳しく解説していきたいと思います。さて、YouTubeの埋め込みコードのカスタマイズ方法を紹介する前にどのようにして埋め込みコードは取得すればいいのでしょうか？

ここではYouTubeの埋め込みコードの取得方法を詳しく解説していきたいと思います。

ブログや記事を執筆する際に、埋め込みコードを使って記事内に表示させることが可能ですが、その際には埋め込みコードが必要になります。まずは埋め込みたいYouTubeの動画を開き、『共有』をクリックしましょう。

上記の画面のように表示されるので『埋め込む』をクリックします。

『埋め込む』をクリックすると、上記の画面のように埋め込みコードが表示されるので、『コピー』をクリックします。上記のコードの中には『枠線を非表示にする』という意味のものが含まれています。後程枠線の非表示を説明します。

このパラメータを知っておくと他サイトにYouTubeの動画を埋め込んだときの表示方法をカスタマイズすることができるのです。

コピーしたYouTubeの動画の埋め込みコードをペーストすればご自身のHPやブログに掲載することができるのでブログだけではなく自身でYouTubeに動画を掲載している場合には埋め込みコードでリンクすると再生回数アップに繋がります。

本記事ではYouTubeの埋め込みコードのカスタマイズ方法を詳しく解説していきたいと思います。先ほどはYouTubeの動画の埋め込みコードの取得方法を紹介しました。続いてはYouTubeの埋め込みコードを利用する際の注意点です。

どのような注意点なのでしょうか？それではYouTubeの動画の埋め込みコードを利用する際の注意点を詳しく解説していきたいと思います。

YouTubeの動画の埋め込みコードを利用する際の注意点を簡単に紹介します。注意点は以下になります。

• 動画の著作権
• 動画の長さ

YouTubeの動画を埋め込む際の注意点として著作権に気を付けましょう。動画には著作権がありますが、アップロードされている動画の中には音楽PVなどのYouTube動画は無断転用することが禁止されているものがほとんどです。

動画を埋め込む前に著作権を確認しましょう。

YouTube動画の埋め込みの注意点として、埋め込む動画の長さに気を付けましょう。埋め込むのに時間制限はありません。しかし長時間のYouTube動画はホームページへの埋め込みには不向きです。動画の再生時間を確認して埋め込みをしましょう。

本記事ではYouTubeの埋め込みコードのカスタマイズ方法を詳しく解説していきたいと思います。先ほどはYouTubeの動画の埋め込みコードの取得方法を紹介しました。また、埋め込みを行う際の注意点も説明をしていきました。

続いてはYouTubeの埋め込みコードのカスタマイズ方法を見ていきたいと思います。ここではカスタマイズ方法として外観のカスタマイズ方法を説明します。

ここではYouTubeの動画の埋め込みコードの外観をカスタマイズする方法を見ていきたいと思います。以下のポイントを紹介します。

• コントロールバー/インフォメーションバーの自動非表示のオフ
• コントロールバーの表示オフ
• インフォメーションバーの表示オフ
• コントロールバーの色の変更
• プログレスバーの色の変更
• レスポンシブデザインの対応

デフォルトでは動画が再生されると、画面下部のコントロールバーと画面上部のインフォメーションバーが自動的に非表示となります。しかし、自動非表示にすることも可能です。『autohide＝0』とカスタマイズしましょう。

<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
autohide=0" frameborder="0" allowfullscreen></iframe>このように行うことができます。

続いて動画を埋め込んだ際に表示されるコントロールバーを非表示にさせる方法を紹介します。埋め込みコードの最後に『?controls=0』を入力するとコントロールバーが非表示になります。

インフォメーションバーとはデフォルトの自動非表示では最初に表示されます。このインフォメーションバーを表示されないように設定します。パラメータ を『showinfo＝0』にします。

YouTubeの動画を埋め込む際にコントロールバーの色を変更することができます。色は赤と白が選べます。最後に『?color=white』か『?color=red』を入力しましょう。

プログレスバーの色の変更も行うことができます。『color=white』か『color=red』と入力して赤か白を選択しましょう。

続いてレスポンシブデザインの対応です。最後に『iframe{ width: 100%; }』を追加するとレスポンシブデザインに対応した埋め込みコードをカスタマイズすることが可能です。

本記事ではYouTubeの埋め込みコードのカスタマイズ方法を詳しく解説していきたいと思います。先ほどはYouTubeの動画の埋め込みコードの取得方法を紹介しました。また、埋め込みを行う際の注意点も説明をしていきました。

そしてYouTubeの動画の埋め込みコードのカスタマイズ方法としてコントロールバーの自動表示なども紹介しました。続いてはYouTubeの埋め込みコードのカスタマイズ方法として再生に関するものを見ていきたいと思います。

どのような手順で再生に関するカスタマイズを行えばいいのか詳しく解説していきたいと思います。

ここではYouTubeの動画の埋め込みコードの再生に関する種類を見ていきたいと思います。以下のポイントに沿って説明をします。

• 自動再生の設定
• 全画面再生の無効
• 字幕の自動表示
• 関連動画の非表示
• 再生開始位置の指定
• 自動リピートの設定
• 動画を途中で再生/停止
• タイトルバーの非表示

自動再生の設定とは動画をクリックした際に自動で動画が再生されるようにすることです。カスタマイズ方法は簡単です。『autoplay＝1』とします。

全画面で動画を表示させたくない場合には『fs＝0』にします。すると全画面表示ボタンはプレーヤーに表示されなくなります。ちなみにデフォルト値は1なので全画面表示ボタンが画面に残ります。

海外の動画を視聴する際に役立つのが字幕の自動表示のカスタマイズ方法です。埋め込み動画に自動で字幕を表示するタグは『?cc_load_policy=1』です海外動画をホームページに埋め込む際に非常に便利な機能です。

まずは関連動画の非表示の方法を見ていきたいと思います。YouTubeの動画再生のあとに表示される動画を非表示にさせたい場合には、基本URLコードの後ろに『？』をつけます。そして『rel=0』と追加すれば関連動画は表示されなくなります。

動画を再生するときに指定した秒数から再生するようにカスタマイズすることも可能です。特に長すぎる動画の際には便利な機能です。30秒後に動画をさせたい例で紹介します。

<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
start=30" frameborder="0" allowfullscreen></iframe>です。『start=表示させたい秒数』にしましょう。

続いて自動でリピート再生を行うことができます。再生回数をアップするには有効です。パラメータ『loop＝1』に設定をしましょう。

動画をあえて途中で再生、停止をさせるカスタマイズも可能です。『?start=秒数&end=秒数』このように再生させたい時間と、停止させたい時間を入力します。

動画のタイトルを非表示にする為のパラメータですが、実はタイトルをクリックするとYouTubeの公式サイトがリンクされているので誤ってクリックしてしまうことを防ぐことができます。タイトルバーを非表示にすることも可能です。

タイトルバーを非表示にするには『?showinfo=0』を動画IDの後に挿入します。これでタイトルバーが非表示になります。タイトルバーの表示はあまりさせなくてもいいかもしれません。

本記事ではYouTubeの埋め込みコードのカスタマイズ方法を詳しく解説していきたいと思います。先ほどはYouTubeの動画の埋め込みコードの取得方法を紹介しました。また、埋め込みを行う際の注意点も説明をしていきました。

そしてYouTubeの動画の埋め込みコードのカスタマイズ方法としてコントロールバーの自動表示なども紹介しました。また、YouTubeの動画の再生に関するカスタマイズ方法としてタイトルバーを非表示にするということもありました。

タイトルも気にしてみましょう。最後はその他の設定手順についてロゴの挿入などを詳しく解説していきたいと思います。

YouTubeの動画のカスタマイズ方法としてその他の設定手順を見ていきたいと思います。以下のポイントに沿って説明をします。

• 枠線の表示オン/オフ設定
• YouTubeロゴの非表示
• 動画の時間指定
• 複数パラメータの入力

ここではYouTubeの動画画面に灰色の枠線を表示させるか枠線を非表示にするか指定することができます。枠線の表示のオン・オフ設定の場合にはパラメータの前に『？』をつけることはないので注意点として覚えておきましょう。

枠線の表示のオン・オフの設定は以下になります。

• frameborder=”0″：非表示(デフォルト)
• frameborder=”1″：表示

YouTubeの動画の埋め込みコードでYouTubeロゴを非表示にしたい場合は、パラメータに『modestbranding=1』を追加しましょう。このYouTubeのロゴがあるとYouTubeの公式サイトで動画を開くことができます。

筆者は割とこのロゴをクリックするのですが、人によってはロゴを使わないという方もいます。ちなみにロゴをクリックすると動画の詳細などを確認することが可能です。ロゴの表示などの設定については考えてみるといいでしょう。

YouTubeの動画の時間を指定することが可能です。動画の時間指定とは決まった時間から再生をスタートすることです。例えば時間を10秒後のところからスタートさせたいという場合には『start＝10』というように時間指定を行えます。

また、動画の時間を終了する箇所を決める事も可能です。最後に『end=10』など、秒数時間を入力すると時間指定が可能です。

今回紹介したパラメータを複数入力して埋め込みコードをカスタマイズしたい方もいるでしょう。そういった場合には『＆』を付けます。パラメータとパラメータの間に『＆』を入力することで複数パラメータを入力することが可能です。

今回はYouTubeの動画埋め込みコードをカスタマイズする方法を紹介しました。動画のタイトルやロゴの表示など普段気にすることもなかった些細な表示です。しかし、タイトルやロゴもカスタマイズすることができるのでぜひ試してみてください。