Youtubeの動画表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！

Youtubeの埋め込み動画をブログに貼った際、ローディングまでの時間が長くて、ユーザーが離脱しているのではと思い、ローディング動画GIFを入れてみました。

こんな悩みないですか？

Youtubeのiframeの読み込みが遅い

Facebookの埋め込みの読み込みが遅い

iframeの読み込みが遅い

こんなやつ↓を入れてみました。

実装したページ

「赤ちゃんができた！」妊娠報告を聞いた夫の反応をまとめた動画が500万再生

読み込みの遅いiflameをバックグランドにCSSでローディングイメージを入れる

こんなサンプルソース

iframeの背景画像で設定！コードはこんな感じです。

 iframe[src^="https://www.youtube.com/embed "] {
background-image:url(https://sample.com/loading.gif);
background-repeat:no-repeat;
background-position:center center;
background-size:32px 32px;
}

ローディング画像は、自分のサーバに置いてね。

いままでiframeを入れて遅くて使えない

いままでiframeを入れたけど遅くて使えない・・と思っていた人は、試してみてはいかがでしょうか？？

facebook用には、少し工夫が必要なので違う記事にしました。
Facebookの埋め込み動画が表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！