LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

One-click play+fullscreen via YouTube API

Suggested code from this StackOverflow answer

Instructions

  1. Click on [play fullscreen]
  2. Click on the fullscreen button in youtube's player to exit fullscreen


Safari 8

It works perfectly:

  1. Enters fullscreen
  2. Exits fullscreen

Firefox 35

Buggy, annoying but working:

  1. Enters fullscreen (on Codepen.io)
  2. Enters fullscreen (YouTube.com)
  3. Third click: Exits fullscreen

Chrome 40

Buggy, broken:

  1. Enters fullscreen (on Codepen.io)
  2. Does nothing
  3. Third click: Exits fullscreen but the video fills the iframe, effectively breaking the site. Screenshot

Mobile browsers

This is the default behavior on iPhone, but it cannot work anywhere else (Android, iPad) since

  • to play() a video or to requestFullScreen() you need a user tap in the same document (read: not across the iframe)

This means that

  • you can't call requestFullScreen() when the video emits the event onplay
  • you can't trigger play() via YouTube API (it would cross the frame) and call requestFullScreen() in the same tap

So with one tap either you play the video or get it fullscreen; you'll always need two separate taps if you use YouTube.

CSS
html {
  padding: 1em;
}

button {
  width: 200px;
  height: 100px;
  margin-bottom: 1em;
}
JS
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)();
  }
}
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:40

Related Codes

Pen ID
Pen ID
Pen ID