的Youtube嵌入视频，在播放按钮全屏点击

Question

我使用iframe

<iframe title="YouTube" src="http://www.youtube.com/embed/aaabbbcccddd?wmode=transparent&amp;autoplay=0" allowfullscreen="allowfullscreen"></iframe> 

我想，如果用户点击“播放”按钮，它会自动进入全屏的Youtube嵌入代码。
相对于用户应该点击“播放”并点击“全屏”按钮 - 我想跳过点击“全屏”部分。

这可能吗？
我需要使用Youtube的Javascript API吗？

是否有这样的事情：

youtube.onPlayButtonClicked(function() { 
    youtube.fullscreen(); 
}); 

预先感谢您！

Answer 1

这可能与youtube API。

var player, iframe; 
var $ = document.querySelector.bind(document); 

// init player 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('player', { 
    height: '200', 
    width: '300', 
    videoId: 'dQw4w9WgXcQ', 
    events: { 
     'onReady': onPlayerReady 
    } 
    }); 
} 

// when ready, wait for clicks 
function onPlayerReady(event) { 
    var player = event.target; 
    iframe = $('#player'); 
    setupListener(); 
} 

function setupListener(){ 
    $('button').addEventListener('click', playFullscreen); 
} 

function playFullscreen(){ 
    player.playVideo();//won't work on mobile 

    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(iframe)(); 
    } 
} 

您可以在此链接有个例： https://codepen.io/bfred-it/pen/GgOvLM