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

先ほど書いた記事に反応してくれたホホさんに手伝ってもらいFacebookの動画を埋め込みした時に、ローディングが長いのでこちらも同じ処理をしたい！ということで手伝ってもらいCSSを作りました。

いい！

Youtubeの動画表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！ http://t.co/cE1TUcQlpl @attripさんから

— Xﾎﾎ家次男 (@hayashikejinan) June 19, 2015

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

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

Facebookの動画埋め込みって遅いよね

読み込まれるまで遅い！他のjavascriptが読み終わってから読み込みにいくもんだから本当に遅い。そのイライラを少しでも解決出来るのが今回のCSS

動作サンプル

イヤホンがからまない様にする方法

イヤホンがからまない様にする方法

ここにも埋め込んでおこう。

テストでいれてみました。

どうでしょうか？ Facebookの埋め込み動画の下でくるくると回るローディング動画GIFがあり、いらいらを軽減してくれそうでしょう。

サンプルソース

.fb-page,
.fb-post,
.fb-video {
  background: url("https://example.com/loading.gif") no-repeat center center;
  background-size: 32px 32px;
}

.fb-post {
  min-height: 150px;
}

.fb-page {
  min-height: 70px;
}

.fb-video {
  min-height: 200px;
}

gifは、自分が使いたいローディング画像にしてくださいね。

これでイライラが少し解消されるといいな

ぼくは、いままでもFacebook動画を埋め込んで記事にすることがあったんだけどあまり多くの人に広がらないのでどうしてかな・・と思っていたのですが、やっぱりローディングがおわらないで動画がみつからないで離脱してしまう人っていたと思うんだ。これで少しでも解消してくれるといいなー。