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

2015/06/20アバター

WBWKY1FQ2I

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

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

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

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

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

動作サンプル

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

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

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

上野公園の桜吹雪。これが一番吹雪いた時かな。

Posted by attrip on 2015年4月6日

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

どうでしょうか?

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

スポンサーリンク

スポンサーリンク

CSS | Facebook」をもっと詳しく

CSS | Facebook

についてもっと見る

コメント大歓迎

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