簡単にできる YouTube 動画の埋め込み小技集

2023年6月14日

今回は、簡単にできる YouTube 動画の埋め込み小技集をご紹介します。

ホームページに動画を貼り付けることで信頼性が高いコンテンツとなり、良質なページになります。

その結果 Google からの評価が上がり、検索順位に好影響を与えるのですが、ただ単に貼り付けただけでは

訪問者に不親切なコンテンツと受け取られたり、離脱されやすくなることもありえます。

ページのデザイン、方向性に沿った動画の貼り付け方として、少し手を加えることで実現できる

YouTube 動画の埋め込み小技の数々を見ていきましょう。

コードを埋め込む際の基本

今回は私個人が趣味として旅先で撮った映像を投稿している YouTubeチャンネル、

Saruko-Trip JAPAN-の中から動画を貼り付ける例として紹介していきます。

もしよかったら覗いてみてくださいね（笑）

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

YouTubeの動画ページの中で動画の真下にある「共有」というボタンをクリックします。

そして、「埋め込みコード」というボタンをクリックし、記載されているコードをコピーします。

コピーした埋め込みコード

この上記のコードをWEBサイトに貼り付けるとYouTubeの動画がサイト上で表示されます。

コードの書き込み位置

このコードに様々なパラメータを追加していくのですが、書き込み位置は、

この部分になります。

パラメータを追加するには、先頭に ? をつける

複数のパラメータを追加するには & でつなぐ

埋め込みコードの小技を紹介

YouTubeロゴを非表示にする

埋め込んだ動画の右下にあるYouTubeのロゴを非表示にするパラメーターです。

デフォルトでは「表示する」状態になっています。

modestbranding=1

再生すると、通常右下にあったYoutubeロゴが消えています。

全画面再生ボタンを非表示にする

fs=0

動画のコントロールバーを非表示にする

動画の下部にある音量、時間、再生バーなどの表示を非表示にします。

controls=0

再生するとコントロールバーが非表示になっています。

コントロールバーの色を変更する

コントロールバーの色も変更することができます。デフォルトは黒です。

theme=light

シークバーの色を変更する

シークバーの色を変更することもできます。通常は赤ですが、白に変更できます。

color=white

関連動画を自分の動画だけ表示させる

以前にも記事で紹介した関連動画を関連動画内で自分の動画だけを表示させます。

過去記事:Youtube動画をブログやWEBサイトに埋め込む際に覚えておきたい便利なタグ

STUDIO DIVE

Youtube動画をブログやWEBサイトに埋め込む際に覚えておきたい便利なタグ

https://studiodive.info/archives/5587

ブログやWEBサイトにYoutube動画を貼り付ける場合に、動画の最後に「関連動画」が表示されます。この関連動画は視聴者にクリックされやすく便利な機能なのですが、WEBサイトなどでは他の動画を視聴されるので離脱の要因にもなりやすいという短所もあります。これは【埋め込みタグ】にひと手間かけるだけで簡単に回避することができます。実際の例※この動画は11秒です。再生して動画の最後の画面をご覧ください。この場合、関連動画を見ると、自分のチャンネルに関係のない動画にリンクされています。この状態では離脱する要因になりも...

rel=0

最後に

他にも様々なパラメータがありますが、使いやすそうなものをご紹介しました。

皆さんもこれを機会にいじってみてはいかがでしょうか。