Youtube動画を大量に張り付けた重たいページを早く表示したい時に使った方法

KIMG3108
Youtubeの動画リンクってiframe 使ってたりするんですがそういう物を沢山ページに張り付けると凄く時間がかかります。

ではどうするか?

という事でネットで検索すると沢山出てきますね。

大抵はimg.youtube.comから取得した画像をページに張りその画像をクリックしたらJavaScriptでiframe のリンクに書きかえって感じで。

という訳でとりあえず私もそれで対応。

方法&手順

※使用される場合はあくまでも自己責任でお願いいたします。

仕組みは2段階です。

先ず、動画のリンクを差し込みたい場所に以下のコードを記述します。

iIlb9J64JIY部分には動画のIDを設定します。

更に width=”468″ height=”360″ はお好みに応じて設定してみてくださいね。

そして

このリンクがクリックされた時に呼び出されるjavascriptの登録です。サイトのソース内のお尻にでも追加してくださいな。

仕組み解説

上記の画像をクリックすると今度はこれはjavascriptによって動的に

と書き換えられて動画が再生できるようになります。

ロジック解説

JavaScriptに関して

クリックされると呼び出されますが呼び出された要素内にwww.youtube.comが存在すれば処理対象としiframeに要素を変換。

でわでわ(^_-)-☆

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
php1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする