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

この記事はWordPressの投稿にYouTube動画を埋め込む方法を紹介いたします。

今回の方法は、WordPress標準搭載のEmbed機能を使用し、Gutenbergのエディタを使用した超簡単な方法です。

基本的にWordPressを毎度アップデートしてる方、もしくは最近WordPressをインストールした方は皆Gutenbergエディタになってるかと思います。

YouTube動画の埋め込み方（超簡単な方法）
YouTube動画の埋め込む（コード直書き）
ページの表示速度高速化

YouTube動画の埋め込み方（超簡単な方法）

WordPressでYouTube動画を埋め込むには、Gutenbergのブロックエディタから操作し『埋め込み』の中にある『YouTube』を展開しそこにURLを挿入します。

YouTube側でコピーするのは下記の場所の埋め込み用のURLです。（ページのURLをコピペしても埋め込まれません。）

この方法だと、スマホから操作しても簡単に埋め込む事が出来ます。

スマホの場合はYouTubeアプリで動画の右上にある⤴︎マークを押し『共有メニュー』を開きます。そこの『コピー』を押して下さい。そこからはPC同様にWordPressの埋め込みブロックにペーストするだけで完了です。

YouTube動画の埋め込む（コード直書き）

またWordPressサイトを運営中、病みを得ずEmbed機能をOFFにしている方や、謎に機能していない方に向けてコードを直接入力（コピペ）してYouTube動画を埋め込む方法も紹介します。

まずYouTube動画のページへ行き、⤴︎マークの共有をクリックします。そこにある『埋め込む』を押します。

そしたら下記のように右側にHTMLが記載されたパネルが開くので、そのHTMLをコピーしときます。

WordPressに戻り、『カスタムHTML』のブロックを作ります。そこに先程コピーしたYouTube動画のHTMLをペーストしたら完了です。

Gutenbergを使って埋め込みが出来なかった場合、基本的にはこの方法で埋め込めるはずです。この方法でも無理だった場合は、HTMLの知識が必要になりますが、videoタグを使う方法で埋め込んで下さい。

自動再生、ループ再生、消音をしたい場合は以下の記事を参照して下さい。

ページの表示速度高速化

YouTube動画をページに埋め込むと、情報量が大幅に増えるのでどうしてもページの読み込み速度が遅くなってしまいます。その改善方法を紹介します。

動画が埋め込まれたページの読み込み速度を改善するには以下のコードを追加ヘッダーに追加して下さい。

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

次に下記の実際の埋め込みコードの様にsrc=”動画URL”の次に記述にdata-src”動画ULR”を入れて下さい。これでページ表示速度が体感でわかるくらい早くなります。

大きさの調整はwidth=”100%” height=”450″がベストかと思います。

<iframe width="100%" height="450" src="https://www.youtube.com/embed/8mbplF4LSI8" data-src="https://www.youtube.com/embed/8mbplF4LSI8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

以上がWordPressでYouTube動画を埋め込む方法でした。

最近、動画を活用したブログが流行ってきていますのでGutenbergの埋め込み機能は非常に役立つと思います。是非活用していってください！！

YouTubeの埋め込みが原因でサイトの表示スピードが極端に低くなって悩んでいる方は今回のやり方を参考にしてみて下さい。