【初心者向け】WordPressにYouTube動画を埋め込む

hakuさん、今さらなのですが、ワードプレスにYouTube動画を埋め込みたいのですがやり方がわからないの

わかりました
ワードプレスにYouTube動画を埋め込む方法は2つあります
YouTubeのURLをワードプレスに直接打ち込む方法と、YouTubeからの埋め込みコードを打ち込む方法です

WordPressにYouTube動画を埋め込む方法

WordPressにYouTube動画のURLを直接打ち込む

埋め込みたいYouTube動画の共有を選択してください
(ここでは私のYouTube動画の埋め込みコードを使って説明いたします)

共有をクリックすると下図の画面が表示されます
コピーをクリックします
クリップボードにYouTube動画のURLがコピーされます

Gutenbergエディターで貼り付けをするだけです

貼り付けすると自動でYouTube埋め込み動画が表示されます

以上でYouTube動画のURLを直接貼り付けるだけで簡単にYouTube動画を埋め込む事が出来ました
Gutenbergエディターでもクラッシックエディターでも同じ事が出来ます
YouTubeの埋め込みツールを使っても埋め込めます

ブロック追加からYouTubeの埋め込みツールを選択

コピーしたURLを貼り付けて埋め込みボタンをクリックすると先ほどのようにYouTube埋め込み動画が表示されます

YouTubeからの埋め込みコードを使う

埋め込みたいYouTube動画の共有を選択してください

埋め込むをクリックしてください

YouTube動画の埋め込みコードが表示されるので左下のコピーをクリックしてください

Gutenbergエディターで貼り付けをするだけです

貼り付けしても自動でYouTube埋め込み動画は表示されませんので、プレビュー画面で確認してください

プレビュー画面で表示されていれば貼り付け成功です

注※YouTubeの埋め込みコードを使う際にWordpressのYouTube埋め込みツールで張り付けると下図の表示になり、張り付けたURLは無効になってしまうので、埋め込みツールは使わずに直接貼り付けてください

どちらの埋め込み方法がいいのか?

埋め込み方法は2種類紹介しましたが、どちらの埋め込み方法が有効なのか?
どちらの埋め込み方法でも間違いはありません
直接URLを打ち込む方法だとWindowsのedge(標準のブラウザ)でのHD画質の再生が困難で、480p以下での再生でないとうまく再生できない場合がある事を確認しました
(動画のエンコードやファイル形式で違いがあるかもしれません)
Google Chromeでは普通に再生されます
iPhoneではどちらの方法でも再生出来ました
因みに、私はYouTubeの埋め込みコードを使って埋め込みしています

2種類の埋め込み方で比較

まず最初に直接URLを打ち込んで埋め込んでみます
edgeでHD画質での再生がうまくできない場合があります

YouTubeの埋め込みコードを使って埋め込んでみます
こちらの方法ではedgeでもHD画質で再生されています

今回のまとめ

WordPressにYouTube動画を埋め込むのを簡単にまとめると

  • YouTube動画のURLを直接打ち込む方法がお手軽で簡単
    注※edgeでの再生に問題がある場合もある
  • YouTubeの埋め込みコードを使って埋め込む方法が今までの埋め込み方で安定している

2種類の埋め込み方を説明しましたが、直接URLを打ち込む方法だとedgeでの再生問題が重くのしかかってきます
YouTubeの埋め込みコードを使う方法は従来通りの方法で安定はしているので私は埋め込みコードをお勧めします

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA