js(jQuery)でYouTubeの「自動再生・自動停止・リセット」全てを行う【超簡単】

おひさしぶりです。

今回は、以前Youtubeの動画を埋め込み、自動再生・自動停止・自動リセットの対応をする機会があったので、その際に書いたコード(一部変更しています)を紹介します〜。

それが以下のコードです。

See the Pen gOmXvjL by IshiiAoi (@ishiiaoi) on CodePen.

簡単に解説していきます。

【html, css】

html, cssの詳しい解説は不要かと思いますので飛ばします。

【javascript】

javascriptもかなり単純なものにしています。

手順としては、

サムネイルをクリックすると、

 ①vdo-innerのhtml内にYoutubeを挿入する
 ②vdo-innerのdisplayをblockにする
 ③coverのdisplayをblockにする 

になります。この際にYoutubeのURLの末尾に「?autoplay=1」をつけることを忘れずに、、、(これをつけることで開いた際に自動再生されます)

動画を開いた後は、動画外をクリックすれば自動で動画は停止・リセットされます。

コードの解説としては

・vdo-innerのhtml内を空(” “)にする

これだけです。

最後に

コードの解説は以上になります〜。参考になれば幸いです。