youtube API ※ 画像をクリックしたら動画を再生させる方法(レスポンシブ対応)
それがレスポンシブともなると、泣きを見る。
手順としては、
1、youtube の画像を表示しておく。
2、画像をクリックされたら、youtube の タグに入れ替える
(youtube API の ハンドル作成 / 自動生成ボタンを勝手に押す)
3、youtube の再生が終わったら、ハンドルを削除して、画像を表示する
で、うだうだ言わずにソースと結論と解説。
ソースパクって、id youtube の部分(ソースパクったらテキストエディタで検索すればよい)と
YouTubeのIDとプレーヤーの幅と高さ(サイズ)だけ変えれば済むと思う。
ただし、レスポンシブのテーマ(テンプレート)にしておかないと、
画像を元に戻す時画像サイズの指定が必要になるので注意。
----- HTML部分 ----- <div id="youtube"> <img src="画像URL" style="cursor : pointer;" class="alignnone size-full wp-image-219" onclick="youtube_click();" /> </div> ----- スクリプト部分 ----- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var ytPlayer; function youtube_click() { var windowWidth = screen.width; //$(window).width(); var windowSm = 767; //----- 説明 ----- //「横幅640px以下のとき(つまりスマホ時)に行う処理を書く」 //と //「横幅640px以上のときに行う処理を書く」 //は、プレーヤーのサイズしか違わないので変数だけ設定して処理するでもOK. //--------------- //横幅640px以下のとき(つまりスマホ時)に行う処理を書く if (windowWidth <= windowSm) { ytPlayer = new YT.Player( 'youtube', // 埋め込む場所の指定 { width: 295, // プレーヤーの幅 height: 180, // プレーヤーの高さ videoId: 'YouTubeのID', // YouTubeのID events: { 'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 }, playerVars: { controls: 0, //コントロールの表示を止める showinfo: 0, //動画情報の表示を止める rel: 0 // 再生終了後に関連動画を表示しない } } ); }else{ //横幅640px以上のときに行う処理を書く ytPlayer = new YT.Player( 'youtube', // 埋め込む場所の指定 { width: 600, // プレーヤーの幅 height: 337, // プレーヤーの高さ videoId: 'YouTubeのID', // YouTubeのID events: { 'onReady': onPlayerReady, // プレーヤーの準備ができたときに実行 'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行 }, playerVars: { controls: 0, //コントロールの表示を止める showinfo: 0, //動画情報の表示を止める rel: 0 // 再生終了後に関連動画を表示しない } } ); } //----- 説明 ----- //プレーヤーの準備ができたとき動画再生 //--------------- // プレーヤーの準備ができたとき function onPlayerReady(event) { // 動画再生 event.target.playVideo(); } //----- 説明 ----- //再生が終わったらプレーヤーを殺して画像に戻す //--------------- function onPlayerStateChange(event){ // 現在のプレーヤーの状態を取得 var ytStatus = event.data; // 再生終了したとき if (ytStatus == 0) { // youtube player のハンドル削除 ディスコンストラクタ ytPlayer.destroy(); // 画像を戻す document.getElementById("youtube").innerHTML = '<img src="画像URL" style="cursor : pointer;" class="alignnone size-full wp-image-219" onclick="youtube_click();" />'; } } } </script>
スポンサーリンク