【ノーコード】WordPressブロックエディタカバーにYouTube背景動画を設置して自動再生ループさせる方法 by プラグイン Advanced WordPress Backgrounds

カバーに直接動画設置はダメなの？

僕もずっとカバーに直接動画をアップロードしてライブラリから引っ張って設置していました。

しかし、ここで問題が・・・スマホで見た時に読み込みが遅い（汗）

じゃあ、動画を軽量化してみました。
このWebサービスが一番シンプルでかんたんに動画軽量化できます。

でもね、１ページに１つの背景動画なら軽量化でOK。
まだ素早く表示できます。

しかし、１ページに２つ、３つと背景動画があれば、もうダメダメ。
スマホサイト表示が超遅い・・・
イライラするレベルです。
ひどい時は10秒もかかります(；ω；)

つまり、カバーに動画を直接アップしても表示速度が遅い、軽量化しても遅いってことで、かなり困りました。

ChatGPTがYouTube背景動画をお勧め

ChatGPTに相談してみると、YouTubeを背景動画に設置したら高速表示できるよ！と言われました。

そこで早速その方法を探しました。

もちろん、HTMLタグで直接埋め込むんで実装できなくもないです。
でも、ただYouTube動画を直接埋め込んで、自動再生ループさせるのは、なんとかできます。

しかし、カバー背景動画にして、その上に文字や画像を置くとなると、いちいちHTMLカスタム、CSS、javascriptなどで対応していたら、今後やる気なくなります。

それにこれからWeb制作スクール「ココウェブAI（仮・未定）」やる生徒に難しい方法なんて教えたくないし。
できれば簡単に実装できれば僕もWeb制作スクール「ココウェブAI（仮・未定）」の生徒もラクチンですよね、今後。
生産効率もアップしますし。

ってことで、下記の条件に当てはまるものを検索っと。

YouTube背景動画の設置条件

Safariでは音声アリや重い動画は強制で静止画にしやがります（汗）
パケット通信料を勝手に使い過ぎないようにする配慮らしいです。

これらの条件を満たすYouTube動画背景動画設置方法が、まぁ全然ない。

検索してもノーコードの方法が見当たらなかった・・・

結構ググって検索してけれど、どれもHTML、CSS、javascriptなど難しい方法ばかりでノーコードでかんたんにYouTube背景動画を設置する方法が、僕が探す限りではありませんでした。

そこで！

僕と同じように困っている人がいると思い、僕が成功した方法を惜しみなく共有します。

誰かのお役に立てれば幸いです。

ユーチューブ背景動画の設置方法

プラグイン：Advanced WordPress Backgrounds をインストールしましょう！

↓

下記の図のように設置すればOK

ブロック：AWBで検索　→　設置　→　右側：Youtube URLを入力

YouTube動画のコツ

自分が管理する適当なYouTubeチャンネルに素材背景動画をアップ　→　限定公開　→　限定公開URLをコピー

https://youtu.be/★★★&vq=hd1080

★★★にはYouTubeから自動で排出された数字と番号の意味不明な羅列を挿入

&vq=hd1080　を語尾に付けることで高画質になります。
不要ならカットしちゃってください。
でも、高画質でも低画質でもそこまで表示速度に差がないので僕は高画質表示をお勧めします

右側：VIDEO　URL　に上記のURLをコピペ
あとは説明面倒なので、図解のようにしてくださいなｗ
一応、クリックまたはタップしたら画像拡大できるようにしておくんで、勝手に見てねｗ

なぜかOverlayオーバーレイに色を付けると、透過できなかったので、Backgroudバックグラウンドにカラーを付けるのがお勧め

以上です。

あとはCSS使わずにブロックで見出し入れたり、段落入れたり、余白調整したりしてみてくださいな。

あ、でもスマホ対応するならCSS調整するか、上段スマホ表示・下段PC非表示してレスポンシブWebデザイン対応してみてくださいな。

このレスポンシブ対応は結構面倒し、それはそれでまた別のスキルが必要になります。
僕は他のYouTuberがやっていない方法でかんたんにレスポンシブ対応しているので、ぜひ気になる方はWeb制作スクール「ココウェブAI（仮・未定）」へｗ

背景動画はあった方が良い？

えぇ、僕は99％あった方が良い派です。

競合は実装面倒なので、できるだけ静止背景画像を設置したがります。
まぁ楽ですしね。

でも、感動度はやはり背景動画、それもYouTube背景動画で高速表示させてみ？
マジで自分もクライアントもユーザーもみんなハッピーですよ。
やっぱ令和だもん、Webサイトには動きがなくちゃ。

もしもあなたがココナラで２万円でWordPressノーコードでホームページ制作してます！って言うなら、今回のYouTube背景画像を設置してあげるだけで、超感謝されますよ。
クレームや怒られることはまずありません。
大丈夫、僕の経験済みなので。

ほんで、評判も上がりますしね。

背景動画はどこから探す？

そんなんYouTubeで「background movie free」で検索すれば無限に出てきます。
それをダウンロードすればOK！
無料なので訴えられることもありません。

または、生成AI動画ですよね。
sora（およそ月額3000円～3万円）やPollo ai（無料版あり）で制作すればOK。

あとは海外の動画素材サイトからダウンロードです。

まとめ

ね？かんたんでしょ？ｗ

実装のお手軽さ、管理のしやすさを考慮すると、できるだけノーコードで実装したいですよね。
僕は最新技術でできるだけかんたんにラクチンにWebサイト制作して、生産効率をアップさせたいのです。

だから、日々いかに楽できるか？を考えてWebサイト制作しております。
ぶっちゃけ、クライアントワーク案件なら、背景動画を設置しますよオプションで　+1～3万円　は取れますよ。
僕は3万円取りますが。

または、僕は今ではあまりなく、昔はたまにありましたが、納期が予定よりも遅くなりクライアントにご迷惑をおかけしてしまった場合、
「ご迷惑をおかけして大変申し訳ございません。その代わりと言ってはなんですが、本来3万円の背景動画設置のオプションを無料で実装しておきました。何卒ご確認よろしくお願いいたします。」
これでキレられたことはまずないですｗ

むしろ、感謝してくれます。
だって、どう考えたって、Webサイトである限り動きがある方が感動度は高いですよ。

でも調子乗ってカバーに直接動画を僕のようにアップしまくると、遅くなってクレームになるわけですｗ
だから、YouTube背景動画にすることで高速表示が実現できるので、調子乗って設置できるわけです。

ぜひ、背景動画はYouTubeを活用してスマホで高速表示させましょう！