Facebookの埋め込み動画が表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！
ライター：
先ほど書いた記事に反応してくれたホホさんに手伝ってもらいFacebookの動画を埋め込みした時に、ローディングが長いのでこちらも同じ処理をしたい！ということで手伝ってもらいCSSを作りました。
いい！
Youtubeの動画表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！ http://t.co/cE1TUcQlpl @attripさんから
— 🌳ﾎﾎ🌳 (@hayashikejinan) June 19, 2015
→先ほどの記事
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動画を埋め込んで記事にすることがあったんだけどあまり多くの人に広がらないのでどうしてかな・・と思っていたのですが、やっぱりローディングがおわらないで動画がみつからないで離脱してしまう人っていたと思うんだ。これで少しでも解消してくれるといいなー。
アットトリップです。
最近の趣味は、盆栽です。
著書:Facebookコミニティ成功の法則
大きなFacebookいいね！ボタンを設置する方法。サンプルコードあり。
Youtubeの動画表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！
スポンサーリンク
スポンサーリンク
「CSS | Facebook」についてのブログ
について時系列でもっと読む
