wordpressでiframe lazy-loadingが使えるようになりましたね。でも動画によってはlazy-loadingが効かなくて、「youtube.comから接続を拒否されました」が出てしまう。その問題点を探った感じです。結果としてpluginを入れることになりましたが、満足いく結果が得られてホッとしています。

Nativeにiframe lazy-loadingする方法

最初に考えたのはwordpress5.5から公式に対応したそのままlazy-loadingする方法。これができれば苦労しないのだね。

<iframe src="nasnigasi.you.tubebe"></iframe>

これでは上手くいかないね。wordpressではlazy-loadingを使うにはwidthとheightを指定する必要がある。初期設定のwordpressはブラウザ？なのか、最初からwidthとheightが決まっていたような気もするが、これはしっかりと決めよう。

<iframe src="nasnigashi.you.tubebe" width="600" height="450"></iframe>

これで動けば万歳だ。自分も一応、このコードで動くことは確認したのだが、一部の(自分の場合は50個中/45個)動画が「youtube.comから接続拒否されました」と出る。nanigashiの動画を直接埋め込みURLだけ貼り付ける方法なら上手く動くが、ページの負担は半端ない。

pluginを使う

自分では有効な手立てが見つけられなかったので、仕方ないのでpluginを入れることにした。2021/12現在でそこそこ更新履歴のあるlazy-loadingのpluginを探したところ、「a3 Lazy Load」が良さそうだなと思った。単純に高評価が多いだけだけど。

普通に素の設定で動画のlazy-loadingがONの設定になっているので使ってみると、全ての動画がうまいこと遅延読み込みされたので、文句は無くなった。加えて、iframeを全てのページにこれから埋め込むと言った愚行を行わずに済んだのは素晴らしい。

まとめ

wordpressは手を抜くためにあるので、とことんpluginに頼りたくなる師走だった。