【Wordpress】YouTube動画をブログに載せる【埋め込む】
ビジュアルエディタ➡共有URLコピーして貼り付け
テキストエディタ➡埋め込みコードをコピーして貼り付け
※下の図のhttps://youtube.be…が共有URLでこれをコピーすれば後は貼り付けるだけ、埋め込むを選べば埋め込みコードが出てきます。
- YouTubeにアクセス。
- ブログで載せたい動画をメニューの「共有」を選択。
- 埋め込みコードを選択。
- 表示されたコードをブログの HTML 内に貼り付ける。
※下記の図の右下のコピーを押せば勝手にコピーされますので、後はテキストエディタに貼り付けてください
以上がWordpressで簡単な埋め込み方法２つになります。簡単でしょ？
こんな簡単なら大体分かってたってなります？一応問題点はありますので、以下のメリットとデメリットをまず見てみてください
【Wordpress】YouTube動画をブログに載せる【埋め込む】メリットとデメリット
WordPressで簡単な埋め込み方法が簡単すぎて少し不安になった人、はまずYOTUBE動画をブログに載せるメリットでも見て落ち着きましょう(笑)
- 記事内容の区切りやテンポを良くしてデザイン性アップや、ユーザーに飽きさせない効果
- 記事や製品の詳しい説明ができる
- 離脱率を減らす
- 滞在時間がアップする
- Youtubeとブログをやってる場合相互のファン層を取り込める
で、やっぱりデメリットですよね。
あります。YOUTUBE動画を貼り付けるので、やっぱり重くなって読み込みが遅くなります。そしてもちろん遅くなるとSEO的に不利になります
- 速度の読み込みが遅くなる
- 遅くなるとSEO対策的に悪くなる
で、なんとかならないかと調べると色々方法がありますが
一つはWordPress（ワードプレス）のプラグインを利用する
もう一つは、読み込みを高速化するコードを埋め込む
次の項目で軽く、その二つに触れていきます
【Wordpress】YouTube動画をブログに載せる【埋め込む】方法・高速化
Youtubeの読み込みを高速化する・JavaScriptコー
上の赤枠が、記事の最初のところに書いて欲しいコードです。
え？書けるか！って？？(笑)
ですよね。
下に貼っておきましたのでコピーして投稿ページの最初に貼り付けてください（※もちろんテキストエディタで）
function init() {
var vidDefer = document.getElementsByTagName(
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute(‘
vidDefer[i].setAttribute(‘src’
} } }
window.onload = init;
</script>
【コピーして貼り付け用】
下記は先ほどテキストエディタに貼り付けた動画の埋め込みコードですが、これを少し変更します
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/ZVcIBwUbWmM” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
上の赤文字の部分
src=”
を
src=””data-src=”
に変更します。
これでYouTube動画を沢山埋め込んだとしても読み込み速度が通常よりも早くなりユーザービリティが良くなります。
Youtubeの読み込みを高速化する【Wordpress】プラグイン
Lazy Load for Videos
a3 Lazy Load
などのプラグインがありますが、AMPエラーが出たりと不具合の報告もありますので、各自入れてみてエラーが出るようなら削除して対応してください
これで【Wordpress】YouTube動画をブログに載せる【埋め込む】ハウツーを終わります。
YouTube動画をブログに載せる【埋め込む】メリットは、あなたの記事に関連のある動画を埋め込むことで、ユーザーを動画に誘導し、SEO的にも有利であるユーザーの滞在時間を上げ、検索結果の上位表示をねらうことができます。
またあなたがYOUTUBEに動画を投稿しているYOUTUBERならサイトとの相互ファン層を獲得する事が出来ます。YOUTUBEだけでなく他のSNSとサイトを相互に連携させることによって多方面からの
ユーザーを流入させれますので是非設定しましょう
特に『ブログ初心者がツイッターを始めるべき理由』を理解しましょう
遊びのない人生も お金のない人生も くだらない
稼いで遊び 遊びをお金に あなたの才能を力に
仮想会社ニークルスク・代表