javascript - Youtube embed video, fullscreen on play button clicked - Stack Overflow

admin管理员组

文章数量:1333654

I have Youtube embed code using iframe

<iframe title="YouTube" src=";amp;autoplay=0" allowfullscreen="allowfullscreen"></iframe>

I want that if users click the "Play" button, it automatically goes fullscreen.
As opposed to the user should click "Play" and click "Fullscreen" button -- I want to skip that click "Fullscreen" part.

Is this possible?
Do I need to use Youtube's Javascript API?

Does it have something like this:

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

Thank you in advance!

I have Youtube embed code using iframe

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

I want that if users click the "Play" button, it automatically goes fullscreen.
As opposed to the user should click "Play" and click "Fullscreen" button -- I want to skip that click "Fullscreen" part.

Is this possible?
Do I need to use Youtube's Javascript API?

Does it have something like this:

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

Thank you in advance!

• javascript
• video
• youtube

Share Improve this question Follow asked Oct 13, 2016 at 12:50 tophertopher 1,39744 gold badges1717 silver badges4141 bronze badges 1

• 1 Have you looked at the youtube iframe api docs? – evolutionxbox Commented Oct 13, 2016 at 12:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It's possible with the 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)();
  }
}

You can have an exemple at this link : https://codepen.io/bfred-it/pen/GgOvLM

本文标签： javascriptYoutube embed videofullscreen on play button clickedStack Overflow