facebook風にyoutube動画が画面内に入ったら自動再生させ画面外になったらストップさせる方法

facebook風にyoutube動画が画面内に入ったら自動再生させ画面外になったらストップさせる方法

画面内に埋め込まれたyoutube動画を自動再生させる方法!

今回はfacebookのタイムライン風に、
もしコンテンツ内にyoutube動画が埋め込まれていたとして、
動画がブラウザの画面内にスクロールインしてきたら動画を自動で再生させ、
動画がブラウザの画面外にスクロールアウトしたら動画を自動的にストップさせる方法をご紹介します。

この方法を使ってできること

  • 複数動画の埋め込みにも対応
  • Youtubeのiframeパラメーターにも対応しているので、インフォメーションバーの削除などが可能。

以下、DEMOです。

See the Pen boyNoz by itachizame (@itachizame) on CodePen.

準備するもの・必要なもの

  1. jquery
  2. jquery.inview.min.js
  3. jquery.youtube-inview-autoplay.js
  4. youtube player_api
  5. メインの実行スクリプト
参考 YouTube 埋め込みプレーヤーとプレーヤーのパラメータ