おひさしぶりです。
今回は、以前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内を空(” “)にする
これだけです。
最後に
コードの解説は以上になります〜。参考になれば幸いです。