スクロールして YouTube 動画がウィンドウ内に入った時に、逐次ロードする方法を紹介します。「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」の遅延読み込み版です。
HTML
補足
- YouTube 動画の埋め込みコードを一部書き換えます。
- src="…" を data-src="…" に変更し、src="about:blank" を追加します。
- src="about:blank" なので、HTML のロード時に YouTube 動画は読み込まれません。
jQuery
補足
- YouTube 動画がウィンドウ内に入ったら data-src の値を src に上書きしています。
CSS
補足
- CSS は「縦横比を維持したまま横幅いっぱいに YouTube 動画を表示」と同じコードです。