Youtubeの動画表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！
ライター：
目次
Youtubeの埋め込み動画をブログに貼った際、ローディングまでの時間が長くて、ユーザーが離脱しているのではと思い、ローディング動画GIFを入れてみました。
こんな悩みないですか？
Youtubeのiframeの読み込みが遅い
Facebookの埋め込みの読み込みが遅い
iframeの読み込みが遅い
こんなやつ↓を入れてみました。
実装したページ
読み込みの遅い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」を設定してみた！！
アットトリップです。このブログの管理人です。最近の趣味は、盆栽です。著書:Facebookコミニティ成功の法則
前の記事
Facebookの埋め込み動画が表示までの時間が長くてユーザーが離脱するのを防ぐためにiframeの背景に「ローディングGIF」を設定してみた！！
次の記事
長くてフォーマットが綺麗になってないCSSを整理・圧縮してくれるサービスCSS Compressor
スポンサーリンク
スポンサーリンク
「CSS」についてのブログ
-
ファミコン風のCSS
-
無料のBootstrapのテーマとテンプレート集
-
電通報のタイトルの文字綺麗だなーと思って調べたらめっちゃ面白かったｗｗｗｗ
-
アメリカ政府が、CSSブートストラップをリリース
-
PCからスマホのサイトを確認するのに便利なChrome拡張「smartphone simulator」
について時系列でもっと読む
