Question

I持って、次のdivに含まれているYouTubeのビデオ：

<div id="playVideo" class="white-popup mfp-hide"> 
    <div class='embed-container'> 
     <iframe id="video" src='https://www.youtube.com/embed/GYmW1u8YiQY?enablejsapi=1&version=3&playerapiid=ytplayer?rel=0' frameborder='0' allowfullscreen="true" allowscriptaccess="always"></iframe> 
    </div> 
</div> 

そして、それを開くに結ばボタン要素：

<div class="ghost-button float"> 
     <a href="#playVideo" id="playPop" class="open-popup-link" style="color:black; font-size:24px; letter-spacing:2px; font-family: 'Pathway Gothic One', sans-serif;" onclick="">WATCH TRAILER</a> 
    </div> 

それは隠されたポップであります-ライブラリで作成

ユーザーがクリックしてポップアップを開くときにビデオを再生するには、次のjavascriptがあります。

$('.open-popup-link').magnificPopup({ 
     type:'inline', 
     midClick: true 
    }); 

$(document).ready(function() { 
     $('#playPop').on('click', function(ev){ 
      $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); 
     }); 

     $('.closebtn').on('click', function(ev2){ 
      $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
     }); 

     $('button .mfp-close').on('click', function(ev3){ 
      $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
     }); 

    }); 

現在、ビデオを閉じるボタンは、ユーザーが手動でクリックして再生した後にのみ動作します。クリックしたときにビデオが自動再生されず、ポップアップが表示されます。これをクリックすると自動再生し、別のボタンをクリックするとどうやって止めることができますか？

Answer 1

リンク元にautoplay = "true"という属性を追加してみてください。

src = 'https://www.youtube.com/embed/GYmW1u8YiQY?autoplay=true&enablejsapi=1&version=3&playerapiid=ytplayer?rel=0'