Web制作

ホームページにYouTube(ユーチューブ)動画を埋め込みスマホでもぴったりに表示する方法

YouTube(ユーチューブ)

今回は、You Tube動画をホームページに埋め込む方法スマホでも画面からはみ出ないように表示する方法を解説します。

よく、You Tubeチャンネルはあるのに、ホームページにはリンクしか張られていないページを目にしますが、非常にもったいないです!

せっかくYou Tubeに動画をアップしたなら、ホームページにも動画を埋め込み、ホームページ上で動画を再生できるようにしたほうが、ユーザーにとってより親切なホームページになります。

今回は補足として、You Tube動画をホームページ上に埋め込むメリット『他の人のYou Tube動画を自分のホームページに埋め込んでも良いの?』という疑問にも回答していますので、ぜひ最後までご覧ください。

You Tube動画をホームページに埋め込む方法(基本)

1.埋め込みたい動画を開き、[共有]をクリック

2.[埋め込む]をクリック

※(補足)メール等で動画のURLを送りたい時には、この画面で[埋め込む]ボタンの下にあるURLをコピーしましょう。

3.[コピー]をクリック

※この画面で開始位置を指定することもできます。
その場合は、[開始位置]にチェックし、その右側で開始する時間を設定してください。

4.ホームページに貼り付ける(Windows:Ctrl+V、Mac:command+V)

WordPressクラシックエディタの場合、[テキスト]タブに貼り付けてください。

WordPressブロックエディタの場合、[+]をクリックし、[カスタムHTML]に貼り付けてください。

※動画が表示されない場合は、コード(テキスト)の画面ではなく、デザイン(ビジュアル)の画面に貼り付けてしまっているケースが多いです。必ず、コード(テキスト)の画面に貼り付けるようにしましょう。

※ちなみに、「autoplay=1」とすることで自動再生にすることもできますが、ウザがられるのでやめましょう。。。

You Tube動画をサイズ変更する方法

コピーしたコードの「width(横幅)」「height(縦幅)」の数字を変更しましょう。

↓変更例
<iframe width=”768″ height=”432″ src=”https://www.youtube.com/embed/・・・・></iframe>

なお、You Tube動画の縦横比は「16:9」です。

16:9のサイズ例

1280 x 720
1024 x 576
768 x 432
560 x 315
512 x 288
256 x 144

You Tube動画をスマホでもはみ出ないようにホームページに埋め込む方法(応用)

You Tube動画の横幅によっては、パソコンでは良い感じに表示できていても、スマホで見た時に、横にはみ出して表示されてしまうことがあります。

その場合は、「width=”100%”」に変更しましょう。

↓変更例
<iframe width=”100%” height=”315″ src=”https://www.youtube.com/embed/・・・・></iframe>

このように設定することで、パソコンで見たときも、スマホで見たときも、横幅に対して100%のサイズで表示されるようになります。

You Tube動画をメールなどで送る場合のリンク取得方法

You Tube動画をメールなどで送りたい場合は、You Tube動画を開き、[共有]をクリックしてから、[コピー]をクリックしてください。

このURLをメールなどに貼り付けて送りましょう。

You Tube動画をホームページ上に埋め込むメリット

You Tube動画をホームページ上に埋め込むメリットは、下記のとおりです。

1.サーバー負担の軽減

自分のホームページ上に直接動画をアップロードしてしまうと、サーバーに負担がかかってしまいます。

そうなると、『動画がなかなか再生できない!』『ページが重くて開かない!』などといったことが起こる可能性があります。

You Tubeに動画をアップロードし、埋め込む形にすれば、サーバーへの負担を軽減することができます。

2.You Tubeからホームページへ誘導&You Tubeで広告収入GET

You Tubeに動画をアップロードすることで、You Tubeからホームページへのユーザーの流入が期待できます。

また、ホームページ上にYou Tubeの動画を埋め込むことで、ホームページを見てくれたユーザーにYou Tubeを知ってもらうこともでき、You Tubeの登録者数が増えれば、You Tubeで広告収入を得ることも可能になります。

なお、You Tubeに広告を貼るためには、チャンネル登録者数が1000人必要です。

1000人の登録者数を集めるのはなかなか大変ですが、ユーザーに役立つ良い動画をUPして、地道に増やしていきましょう。

他の人が作ったYou Tube動画を自分のホームページに埋め込んでもOK(著作権的にも問題なし)

他の人が作ったYou Tube動画を自分のホームページに埋め込むことも可能です。著作権的にも問題ありません。

ただし、例えば他の人が作った動画を自分が作った動画のように見せるなどといった行為はNGですし、ホームページの記載内容によっては問題になることもありますので、他の人が作った動画を自分のホームページに埋め込む時には節度をもって行うようにしましょう。

まとめ:You Tube動画を自分のホームページに埋め込んでみよう!

せっかくYou Tube動画をアップロードしたなら、ぜひ、自分のホームページにもその動画を埋め込んでみましょう。

《You Tube動画をホームページに埋め込む手順》
You Tube動画を開く→[共有]→[埋め込む]→[コピー]→自分のホームページに貼り付け

スマホでも横幅ぴったりに表示するためには、「width=”100%”」に変更しましょう。

《You Tube動画のリンク取得方法》※埋め込みをせず、リンクだけ取得したい場合
You Tube動画を開く→[共有]→[コピー]

当方では、You Tubeチャンネル開設サポートや、サムネイル画像の作成等も承っておりますので、下記よりお気軽にお問い合わせください。

お問い合わせ