的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