埋め込み型YouTube動画が原因で重くなったページを軽くする方法2016.06.097,672埋め込み型YouTube動画が原因で重くなったページを軽くする方法WEBサイト制作WEBディレクションコーディング・システム開発タクロウシェアツイート目次YouTubeをiframeで埋め込むとページ表示がめっちゃ重い。埋め込み動画が重くなる理由そこで思いついたのが「動画のモーダルウィンドウ化」です。社内のゴミ出しのチェックからお客様窓口まで、なんでもやるバックエンドの林田です。今回は最近ゆうちるの心を掴んだ施策をご紹介します。YouTubeをiframeで埋め込むとページ表示がめっちゃ重い。1ページに1個くらいの埋め込み動画ならあんまり気にならないんですけど、4つも5つも動画があるとさすがにページ読み込みが重くなってしまう。ページ読み込みが重いと「百害あって一利なし」何ひとついいことありません。)いちいちページが重いと、他のページを見る意欲がそがれちゃう(回遊率↓)「あのサイトは重いから見たくない」と思われて、二度とサイトに来てくれなくなる(流入↓)ね?いいこと何一つないですね。動画を再生しようがしまいが、ページを取得するたびに動画データを毎回読み込んでいるので重いのです。そこで思いついたのが「動画のモーダルウィンドウ化」です。そこで思いついたのが「動画のモーダルウィンドウ化」です。※ライトボックスのようにクリックするとボヤンと拡大画像が表示される所業がモーダルウィンドウ動画のiframeコードを削除して、替わりにキャプチャした画像を配置。この画像をクリックするとモーダルウィンドウで動画が表示される寸法です。これでYouTubeサイトに遷移することなく、自分のサイトで動画が見れて、且つ、動画を見たい時にだけ通信が発生するのでページも軽くなります。おまけにモーダルウィンドウなのでちょっと格好いい!モーダルウィンドウはEC-CUBEにディフォルトで入っているjsの「colorbox」を使用しています。http://www.jacklmoore.com/colorbox/実装例[スイッチ断ボールIII]http://switch-dan-ball.jp/ちょっとスクロールしたとこにある動画です。改善されました!どうぞお試しください。簡単HTMLメール作成ツール2019.03.27お客様は日本人。5-17-15升川ビル202HP:henobufactory.co.jpウェブチームに、ビジネスセンスを。