Youtube IFrame Player APIを使い、用意したボタンをクリックすると再生する機能を作りたいです。
最終的には、埋め込みたい動画のサムネイルを取得し、サムネイルをクリックすることで動画が再生されることを目標にしています。2年前位の記事を参考に記述したのですが、2度タップをしないと再生されない仕様になっており、別のブログ記事を参考に記述してみたのですが再生されません。
参考にしたブログ
リンク内容
アドバイスよろしくお願い致します。
現在のコード
HTML
1<body> 2 3 <div id="player"></div> 4 <button id="youtube__play-btn" type="button">play video</button> 5 6 <script> 7 var tag = document.createElement('script'); 8 tag.src = "https://www.youtube.com/iframe_api"; 9 var firstScriptTag = document.getElementsByTagName('script')[0]; 10 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 11 12 function onYouTubeIframeAPIReady() { 13 // 14 var player = new YT.Player('player', { 15 height: '360', 16 width: '640', 17 videoId: 'M7lc1UVf-VE', 18 events: { 19 'onReady': onPlayerReady 20 } 21 }); 22 } 23 24 function onPlayerReady(event) { 25 document.getElementById('youtube__play-btn').click(function() { 26 event.target.playVideo(); 27 });; 28 } 29 </script> 30</body>
あなたの回答
tips
プレビュー