This is standard

KAIZEN PLATFORM社が提供するA/Bテストプラットフォームにてグロースハックを行っているフリーランサーのサイトです。

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

      2015/10/31

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

DEMO

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

■jQuery

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

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

【scrollイベント解除】

DEMO

 - HTML・CSS・Javascript, Tips

  関連記事

instagramのuser idを取得する方法

※2016.09.08追記 こちらのサイトのテキストボックスにuser名を入力す …

レスポンシブWebサイトでjQueryでブレイクポイントを判定する方法

レスポンシブWebデザイン制作でPCではjsライブラリを使いたいが、SPでは使い …

【ECサイト】javascriptで出荷日時を自動で表示する方法

Amazonをはじめ、多くのオンラインショップで即日配送を実施されてますよね。 …

[jQuery]id順に要素を並び替える

idを付与して並び替える方法の覚書です。 parseIntで並び替える方法もあり …

Googleアナリティクスでイベントトラッキングを取得する

ECの運用担当者なら、バナーやリンクのクリック数を計測したいと思います。 jQu …

jQueryで空白文字を削除する

テキストだけ取り除きたいときはtrime()を使います。 ・HTML [cray …

jQuery正規表現を使って金額を抽出するには

ある案件で、動的に価格表記を変更したいとの依頼がありました。 そこで正規表現を使 …

jQueryでA/BテストができるプラグインeasyAB

LPなどのA/Bテストを簡単に実施できるjQueryプラグインeasyABのご紹 …

LPで使えるjQueryアニメーションボタン2

ボタンにきらっと光るアニメーションを入れる方法をご紹介します。 デモページはこち …

【jQuery】画像が404エラーの時、別の画像を表示する方法

クライアントより、動的に一覧ページに複数の画像を掲載したいというご要望がありまし …