フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【2024年最新版】WEBサイトにYouTube動画を埋め込む方法

YouTube
使い方

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

YouTubeには多くの動画が公開されています。
そして、この動画は面倒な申請は不要で誰でも簡単に自分のWEBサイトに埋め込むことが出来ます。
そんなYouTube動画の埋め込み方法はとても簡単です。
今回の記事ではWEBサイトにYouTube動画を埋め込む方法をご紹介します。

WEBサイトにYouTube動画を埋め込む方法

YouTube動画をWEBサイトに埋め込むには大きく分けて以下の2つの作業が必要になります。

  • YouTubeサイト側での作業
  • 埋め込むWEBサイト側での作業

一連の作業の流れをご紹介します。

YouTubeサイト側での作業

まずはYouTubeサイトにアクセスします。
https://www.youtube.com/

続いて、埋め込みたい動画のページを表示します。

表示されたページの動画の右下にある「共有」をクリックします。

「共有」をクリックするとポップアップで共有の設定画面が表示されます。
そして、この設定画面にある「埋め込む」をクリックします。

「埋め込む」をクリックするとポップアップ画面が以下のように切り替わります。
そして、この設定画面にある「コピー」をクリックします。

画面の左下に「クリップボードにコピーしました」と表示されれば、埋め込みに必要なコードの取得は完了です。

埋め込むWEBサイト側での作業

YouTubeで埋め込むために必要なコードを取得したら、次は埋め込みたいWEBサイト側での作業になります。

WordPressに埋め込む場合

ここからはWordPressを使っている場合の手順になります。

まずは管理画面にログインし、埋め込みたいページの編集画面を開きます。
そして、左上にある「+マーク」をクリックします。

ブロックの中から、「カスタムHTML」を選択します。そうするとグーテンベルグのエディタ内に「カスタムHTML」のブロックが生成されます。

「HTML を入力…」の部分に、ここに先ほどYouTubeでクリップボードにコピーしたコードを貼り付けます。
Windowsの場合はキーボードの「Ctrl+V」を同時に押すことでコピーしたコードを貼り付けることが出来ます。

「公開」ボタンを押せばWordPressでのYouTubeの埋め込み作業は完了です。

最後に、ちゃんとYouTubeが埋め込めているか確認してみましょう。

なお、グーテンベルグの中には「YouTube」というブロックがありますが、今回ご紹介している方法では使うことが出来ません。

HTMLファイルに埋め込む場合

自分で作成したHTMLファイルに埋め込む場合は、YouTubeでクリップボードにコピーしたコードを埋め込みたい場所に貼り付けます。
Windowsの場合はキーボードの「Ctrl+V」を同時に押すことでコピーしたコードを貼り付けることが出来ます。

WEBサイトにYouTube動画を埋め込むメリット

サーバーへの負担が少ない

自分のサーバー上にMP4動画を埋め込むと、サーバーの容量が圧迫されるだけでなく、動画の読み込みに時間がかかってしまいます。特に長時間の動画の場合、負担がさらに増えてしまいます。
一方で、YouTube動画を埋め込む場合は、自分のサーバーの容量を圧迫することなく、YouTubeの高性能なサーバー経由で動画を再生するので、サーバーに負荷がかかることはありません。

ページ滞在時間の増加が見込める

動画は視覚的で魅力的なコンテンツです。
WEBページに動画を組み込むことで、閲覧者は動画を視聴するだけでなく、その間もサイト上に滞在することになります。
適切な動画を組み込むことで、WEBページの内容と一致するようなものを選ぶと、閲覧者の滞在時間を延ばすことが出来ます。SEOの観点からも、ウェブページの滞在時間を長くすることは重要です。そのため、関連性の高い動画コンテンツを活用して、ページの品質向上と検索エンジンでのランキング向上を目指したいですね。

まとめ

いかがでしたか?
YouTube動画をWEBサイトに埋め込むのはとても簡単ですね。
YouTubeには魅力的なコンテンツが数多く公開されているので、適切な動画を選んで埋め込むことで、さまざまなメリットを得ることが出来ますね。しかも、これらの機能を無料で利用出来るのは便利ですね。