夜の帳がおりています。良い時間をすごせますように。JavaScript]YouTube動画は、デフォルトでもWebサイトに埋め込んで再生させること自体はできます。「特定のダイアログ(≒モーダル)を開いたら、お店(または企業)の公式YouTube動画を自動再生するようにしてほしい」という様なオーダーを受けたら、どうすれば良いでしょうか。今回は、そんな場合に対応する方法について、記事を書いていきます。冒頭の様なオーダーに対応できる様に、YouTubeが公式APIを公開してくれています。API」というものになります。こちらは文字通り、IFrame読み込みしたYouTube動画を、JavaScriptで制御する事が可能になるAPIです。これを使うと、冒頭に書いたような「特定のダイアログ(≒モーダル)を開いたら、YouTube動画を自動再生する」といった事が比較的簡単に実現できるわけですね。それでは早速その使い方について、書いていきたいと思います。使用するための、JavaScript側のコード例になります。[1]〜[6]のセクションに分けてコメントを記載してあります。targetPlayer.stopVideo();});何が書いてあるかの解説など少し長いコードですが、内容はコメントアウトに記載してある通りとなります。API」を読み込んでいます。(ざっくり言うと差し込んでいる)、という記述です。API」の読み込みが完了しています。API」が実行してくれる関数の定義です。「再生時に取得させるイベントは何か」といった設定を渡してあげている記述です。して、動画の設定を渡します。第一引数にはIframeを設置する要素をidで指定。第二引数に、各種設定を記述する形となります。文字通り縦横のサイズをpx値で指定。再生したいYouTube動画のIDを指定。「再生時に取得させるイベントは何か」の部分を定義します。特段使わない場合は指定しなくても良いです。(再生準備が整った時)を指定してあります。「何か状態が変更された時」になります。何らかの操作が行われたタイミングで何か処理を実行したい場合などに使えます。(再生準備が整った時)イベントが発生したタイミングで実行する処理を書いています。指定しておく)再生ボタンを押せるようにしているということです。取得、変数に格納しているという部分になります。・開くダイアログ内の閉じるボタンになります。対応するclass名を持つ要素をあらかじめhtml内に置いておけば取得できる部分になります。再生ボタンが押された時に実際に起きる処理を書いている部分になります。対して、それがクリックされた時(クリックイベントが発生した時)の挙動を書いている部分です。第二引数に、実行する関数を記載します。いうclassを渡してあげています。してあげる、と言う設定をあらかじめcssに用意しておくという事です。最重要と言っても過言ではない「mute()」とても重要な記述が、その次の行にあるtargetPlayer.mute()targetPlayer.playVideo()になります。対象の動画の音声をミュート。使って再生しているわけですが、これがとても重要な部分です。絶対に書き忘れてはならない記述です。想像するとそれがよろしくない事は明白ですよね。電車の中で、爆音で動画がいきなり再生されるようなケースを考えれば、この1行が必須な事は明白だと思います。必須で記述するのを忘れないでください。言う命名は自由に設定する事が可能です。「モーダルの背景をクリックした時」と「モーダル内の閉じるボタンをクリックした時」に「モーダルを閉じて、動画の再生も止める」という部分の記述になります。開く時のクリックイベントと同じような内容ですので、説明は省きます。「特定のダイアログ(≒モーダル)を開いたら、YouTube動画を自動再生する」と言う事が実現できるわけです。最低限必要なhtml最低限必要なhtmlは次です。class="movie-trigger">再生する</a>最低限必要なcss最低限必要なcssをあげるとすれば、次のような形でしょうか。これはもう、案件によって要件も違うと思いますので、本当にお好みで自由にスタイリングするのが良いと思います。API」の、YouTube公式の解説ページは次のURLになります。https://developers.google.com/youtube/iframe_api_reference?hl=ja↑やはり、公式解説が一番正確で、一番わかりやすいと思います。この記事のまとめ今回は、Web制作をしている際に「特定のダイアログ(≒モーダル)を開いたら、お店(または企業)の公式YouTube動画を自動再生するようにしてほしい」という様なオーダーを受けた場合に対応できるようにする方法について記事を書いてみました。API」を使用する方法になります。実際にいろいろ試してみると、案件によっては役立つことかと思います。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。