YoutubeやVimeoの動画を埋め込んだページの表示速度を上げる方法

YoutubeやVimeoの動画を1ページに複数埋め込むと
ホームページの表示速度が非常に遅くなります。
特にYoutubeは時間がかかります。

改善策として
ホームページに代替画像を表示して
画像をクリックした時点で動画を読み込み自動再生する方法を紹介します。
画像を読み込むだけなので、表示が非常に速く効果的です。

ただし現時点でiPhone、iPad、Androidは自動再生が機能しないので
そのまま動画を表示するようにして、パソコンのみの対応になっています。


●Youtubeの場合
[Javascript]


[HTML]


●Vimeoの場合
[Javascript]


[HTML]


パソコンのみ画像表示にして
画像の上にカーソルが来るとリンクカーソル(指マーク)
に変わり、クリックすると、埋め込んだ動画を読み込んで、
自動再生されます。
iPhone、iPad、Androidは現時点で自動再生が機能しない
のでそのまま埋め込んだ動画が表示されるようにしています。
自動再生が機能するようになれば、if文をとればパソコン以外も対応できると思います。
スポンサーサイト

コメントの投稿

管理者にだけ表示を許可する

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: お尋ねします。

ありがとうございます。
鍵コメの返信は非公開にできないみたいなので
メールボタンからメールで返信しました。
見てみて下さい。
********************
「常時SSL」のためのレンタルサーバーZenlogic
********************
 「国内最安級500円」のミニサーバー GMOクラウド ALTUS 
********************
★月々100円(税抜)からオンラインショップを運営!
独自SSL・高機能カート・クレジット決済が簡単導入
ロリポップ!
********************
格安ドメイン取得サービス─ムームードメイン─

プロフィール


PC et cetera
趣味:水泳・ななと散歩
好きな言葉:プチサプライズ
Webサイトやパソコンサポート、ちょっとした雑学などについて更新しています。

ピックアップ
最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
メールフォーム

名前:
メール:
件名:
本文:


別画面表示する
リンク
PR
Twitter
公開ソフト一覧
シェアウェア特典
ホームページ・ソフト作成のご相談
Translation Service
Google Translate
*The accuracy of the
translation can not be
guaranteed.

Amazon 個人的おすすめ商品