BLOG

【図解】ホームページにYouTube動画を埋め込む方法(サイズ調整方法も解説)

kanri
本記事はこんな方にオススメです
  • ホームページに動画を載せたいと考えている方
  • ホームページを作成したいと考えている方
  • 未経験からWebデザイナーに転職・就職したい方

今回は、ホームページにYouTube動画を埋め込む方法について解説します。

どのデバイスでも丁度良いサイズで動画を表示する方法WordPressに動画を埋め込む方法も解説しています。

補足として、YouTubeよりもおしゃれに動画を表示したい方におすすめのサービスもご紹介していますので、ぜひ最後までご覧ください!

自分のホームページに動画を載せるならYouTubeがおすすめ

自分のホームページに動画を載せたいなら、YouTubeに動画をアップロードし、YouTube動画を埋め込む方法がおすすめです。

動画はサイズが大きいので、自分のホームページに動画をそのままアップロードすると、ホームページが重たくなってしまう恐れがあるためです。

YouTubeに動画を公開することで、YouTube経由のアクセスや、広告収入も狙えます。

えりー
えりー

しかも、YouTubeなら無料で使うことができます!

ホームページにYouTube動画を埋め込む方法

1.ホームページに埋め込みたいYouTube動画を開く

YouTubeにアクセスし、埋め込みたい動画のページを開きます。

▼YouTube(別画面で開きます)
https://www.youtube.com/

2.[共有]をクリック

えりー
えりー

今回は私の好きな「猫は液体」動画を埋め込んでみたいと思います!

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

4.(必要に応じて)サイズを調整

横幅は「width=”560″」ピクセル、縦幅は「height=”315″」ピクセルになっているので、ここを調整しましょう。

どの画面幅のデバイスでも丁度良いサイズで動画を表示したい場合は、横幅を「%」で指定しましょう。

例)width=”100%”

上記の場合、横幅に対して100%サイズで表示されます。

縦幅はピクセル指定のままで大丈夫です。

えりー
えりー

横幅をピクセルで指定すると、横幅が狭いデバイス(スマホなど)で、動画が横にはみ出してしまう場合があります。

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

6.コピーしたコードを貼り付け(Ctrl+V)

コピーしたコードを、YouTube動画を表示したい位置に貼り付けます。

HTMLコードに貼り付けましょう。

※動画が表示されない場合は、ソフトのビジュアルモードなどに貼り付けている可能性があります。HTMLコードのモードで貼り付けてください。

《WordPressの場合》

ブロックエディターをお使いの場合は、YouTube動画を表示したい位置にそのまま貼り付けてください。

クラシックエディターをお使いの場合は、「テキスト」タブに切り替えてから、貼り付けてください。

7.ページを公開して、動画を確認

えりー
えりー

YouTube動画をホームページに埋め込むと、こんな感じになります!可愛いですね↓

《YouTube動画の著作権について》

YouTubeの場合は、他の人が作った動画を自分のホームページに埋め込んでも著作権的には問題ありません。

(YouTubeに動画を投稿する場合、他の人が共有したり、埋め込んだりすることにも同意することになるため)

あわせて読みたい
ホームページやブログに引用を記載する方法【2つのポイント】
ホームページやブログに引用を記載する方法【2つのポイント】

(補足)YouTubeよりおしゃれに動画を表示したいなら「Vimeo」がおすすめ

YouTubeだと無料なので仕方がないのですが、細かい設定ができなかったりして、ちょっと不便です。

もっと細かい設定をしたい方や、よりおしゃれに動画を表示したいなら、有料ですが「Vimeo」がおすすめです。

出典:https://vimeo.com/jp/

▼Vimeo(※別の画面で開きます)
https://vimeo.com/jp/

「Vimeo」ならYouTubeよりも細かい設定が可能で、動画を埋め込んだ時の見た目もシンプルでおしゃれです。

まとめ:ホームページにYouTube動画を埋め込んでみよう

自分のホームページに動画を載せたいなら、YouTubeに動画をアップロードし、YouTube動画を埋め込む方法がおすすめです。

YouTubeなら無料で簡単に動画をアップロードできますし、YouTubeのサーバーを使うので、自分のホームページが重たくなることもありません。

上記でYouTube動画を埋め込む方法を解説していますので、ぜひ参考にしていただけたら嬉しいです。

なお、YouTube動画をアップロードする方法については、今後また別の記事で詳しく解説したいと思います。

ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web制作のことや、就職・転職に役立つ情報を発信しています。
error: Content is protected !!
記事URLをコピーしました