YouTube動画のホームページへの埋め込み方と7つのカスタマイズテクニック

YouTube動画のホームページへの埋め込み方

ホームページとYouTube動画の連動は動画運営上や、ホームページ運営上欠かせないものとなった。

ただ、ホームページにYouTube動画を埋め込むのではなく、ユーザーに適正に見せるための埋め込み方をお伝えしていく。

SPONSORED LINK

ホームページへYouTube動画を掲載する方法

youtube動画共有

まず、YouTubeにアクセスを行い、ホームページに埋め込みたい動画まで進む。その後、赤枠で囲った「共有」と書かれたボタンを押す。

youtube共有方法

YouTube動画の共有方法は以下の通りだ。3点とも大事なので確認してほしい。

  • ①URLについて:ブログなどのサービスを利用している方は、このURLコードを入れ込むことで動画が出現する。動画をホームページに埋め込むのではなく、リンクを貼りたい場合も利用する。
  • ②開始位置について:開始位置を設定することで、ホームページ上に再生をする時間を決めることが可能になる。
  • ③埋め込みコード:こちらのボタンを押して、ホームページに埋め込むいつ用がある。

 

その他、共有ボタンについては、アカウントを持っていれば自動でシェアされる。

 

それでは、埋め込みコードについて説していく。③のボタンを押すと、下記のようなコードが出現する。

youtube動画埋め込み

  • ⑤埋め込みコード:このコードをホームページに埋め込むだけで、動画が表示さされる。
  • ⑥動画のサイズ:「横560×縦315」「640×360」「853×480」「1280×720」「カスタム」と画像のサイズを選択することが可能だ。コードを直接変更することも可能だ。
  • ⑦動画が終わったら関連動画を表示する:動画が終わった場合に他の関連動画が表示される仕組みだ。ホームページに埋め込む場合はユーザーが逃げる可能性があるため、チェックは外しておく必要がある。もちろん自身で撮影した動画の場合はチェックしておくべきだ。
  • ⑧プライバシー強化モードを有効にする:有効にする場合はユーザーが動画を再生しない限り、ウェブページを訪れたユーザーの情報は YouTube に保存されない仕組みだ。チェックを外していて問題はない。詳しくは「動画と再生リストを埋め込む」を確認してほしい。
  • ⑨以前の埋め込みコードを使用する:現在の埋め込みコードは「<iframe…」で始まる。以前は「<object…」始まっていた。チェックを入れると「<object…」に埋め込みコードが変更される。ここにチェックを入れる必要はない

 

直接埋め込みコードを編集し、画像サイズを整える

「⑥画像のサイズ」で自身に合った画像サイズがある場合は問題ありませんが、ページに合った画像幅にする必要がある。「カスタム」で行う方法もあるが、埋め込みコードを編集した方が早い。

「⑤埋め込みコード」で出てきたコードは以下の通りだ。

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

中の埋め込みコードに 「<横>width=”560″」「<縦> height=”315″」と記載があるはずだ。この部分が画像のサイズをあらわすので、好きなサイズに変更が可能になる。

適性比率は「16:9」なので、比率を合わせておけば違和感がない。

 

実際の埋め込んだ、動画は以下になる。

上動画は「横610×縦343」のサイズだ。比率の計算が面倒な方は「カスタマイズ」を利用して横幅だけを決めることで、YouTubeが勝手に比率を定めてくれるので便利だ。

埋め込みコードのカスタマイズテクニック

YouTubeの埋め込みにはホームページをより良く見せるテクニックがいくつか存在するので紹介しよう。是非参考にカスタマイズしてみてほしい。

1.YouTubeのタイトルバーを消す

YouTubeのタイトルを消す

(上画像)YouTubeのタイトルバーは画像も見にくく、YouTubeのサイトへの飛びやすく離脱の原因にもなるため、消込みをかける。共有ボタンやYouTubeへのリンクも消えてスッキリした印象になる。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?showinfo=0

合わせると「src=”//www.URL?showinfo=0」と追加する。下記サンプルコードも参照。

<iframe width="610" height="343" src="//www.youtube.com/embed/ACPUuSIcL6M?showinfo=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

2.YouTubeのロゴを消す

YouTubeロゴを消す

(上画像参照)YouTubeへの誘引を行ってしまうため、ロゴが嫌と言う方におすすめだ。そんな小さなことは気にしない方は無視してほしい。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?modestbranding=1

合わせると、「src=”//www.URL?modestbranding=1」と追加する。下記サンプルコードも確認してほしい。

<iframe width="610" height="343" src="//www.youtube.com/embed/ACPUuSIcL6M?modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

3.YouTubeの下のメニューごと消す

下を消込む

(上画像)先ほどのロゴどころが、全てのメニューを消したい場合は下記のようなコードを追加する。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?controls=0

合わせると、「src=”//www.URL?controls=0」と追加する。下記サンプルコードも確認してほしい。

 

4.YouTubeを自動再生させる

ホームページに埋め込んだYouTube動画をページを開くと共に自動再生を行うやり方だ。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?autoplay=1

合わせると、「src=”//www.URL?autoplay=1」と追加する。下記サンプルコードも確認してほしい。

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

 

5.YouTubeの画像をループさせる

短い動画などの場合、再生を押した時点で、停止ボタンを押すまでループさせる方法。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?loop=1

合わせると、「src=”//www.URL?loop=1」と追加する。下記サンプルコードも確認してほしい。

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

 

6.YouTubeを指定の位置で停止・再生させる

YouTube動画を指定の位置で、再生し、停止させる埋め込みコードの修正方法だ。長い動画で編集したくない場合に重宝する。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?start=(再生秒数)
  • ?end=(停止秒数)

仮に再生秒数が50秒から、停止が100秒だった場合の埋め込みコードは、「src=”//www.URL?start=50&end=100」と追加する。間に「&」を入れる必要があるので注意しよう。下記サンプルコードも確認してほしい。

<iframe src="//www.youtube.com/embed/ACPUuSIcL6M?start=50?&end=100"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

 

7.YouTubeにデフォルトで字幕を表示させる

知らない方もいるかもしれませんが、YouTubeには字幕機能が搭載されている。こちらも埋め込みコードに追加するだけで、常に字幕をONの状態にすることができる。英語の動画などには最適だ。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。

  • ?cc_load_policy=1

下記コードも参考にしよう。動画のプレーヤータイプはAS3、AS2の限定なので注意しよう。

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

 

まとめ

YouTube動画のカスタマイズに関してはその他色々な方法も存在するが、使用頻度は動画サイトを作成しない限り低く、埋め込みレベルの知識さえあれば問題ない。

YouTube動画のカスタマイズに凝る前に他の事も考えていく方が重要だ。

SPONSORED LINK

SPONSORED LINK
NNアナリティクス

Edit

この記事を書いた人

辻 昌彦

辻 昌彦
以前はSEOペコの名前で活動をしていました。今では株式会社peko(ペコ)のサイトを東京丸の内で運営しております。 企業や個人の方になるべく役に立つようなSEOの記事、Webマーケティング関連の記事を配信していきますので、よろしくお願いします。

コメント

メールアドレスは非公開情報です。必須項目: *

*