HTML・CSS・Javascript

スクロールしてYouTubeを自動再生する方法

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

YouTube動画付近までスクロールすると自動再生する方法をご紹介します。

DEMO

■ロジック
・スクロールし、YouTube動画付近(1100px)で自動再生
・再生後は停止しない

■jQuery

■ポイント
単純に1100px付近でiframeのsrcを入替えているだけです。
その時に.autoplayクラスを追加し、autoplayクラスがある時はscrollイベントを解除しています。

【iframeのsrcを入替え、autoplayクラスを追加】

【scrollイベント解除】

DEMO

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