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

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

2015/06/20

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

こんな悩みないですか?

Youtubeのiframeの読み込みが遅い

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

iframeの読み込みが遅い

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

ajax-loader (1)

 

実装したページ

「赤ちゃんができた!」妊娠報告を聞いた夫の反応をまとめた動画が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」を設定してみた!!

スポンサーリンク

スポンサーリンク

CSS」をもっと詳しく

CSS

についてもっと見る

コメント大歓迎

コメントは受け付けていません。