JSFiddle - React, Tailwind, and code Playground

by ken tsai

HTML

<script src="http://www.youtube.com/player_api"></script>
<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#bg span {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  text-decoration: none;
  opacity: .4;
}

h1,
h2 {
  position: relative;
  z-index: 2;
  width: 500px;
  font: 14px/16px Arial;
  background: #fff;
}

#vid-placeholder {
  position: relative;
  z-index: 2;
  width: 500px;
}

JavaScript

var YT_embeded = false;
$(function() {
  //create bg tiles
  $bg = $('#bg');
  for (var i = 0; i < 900; i++) {
    $bg.append('<span style="background:' + randomColor() + '" >&nbsp;</span>');
  }
  //make spans color change on hover.
  $('#bg span').on('click mousemove touchmove touchstart', function($e) {
    $e.preventDefault();
    $($e.currentTarget).css('background', randomColor());
  });

  function randomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }

  //this must be a JS fiddle issues, only way i could get the callback to work.
  if (window.YT && YT_embeded === false) {
    onYouTubePlayerAPIReady();
  }

});

//API is embeded in HTML block.
function onYouTubePlayerAPIReady() {
  YT_embeded = true;
  var ytPlayer = new window.YT.Player('vid-placeholder', {
    height: '282',
    width: '500',
    videoId: 'ixl9yeQqudg',
    playerVars: {
      'rel': 0,
      'autoplay': 1,
      'wmode': 'transparent',
      'modestbranding': 0,
      'showinfo': 0,
      'origin': '//' + document.domain

      //hiding controls will fix this issue on ipad.
      //but no way to re-activate.
      //,'controls' : 0
    },
    events: {
      onReady: onReadyHandler,
      onError: onErrorHandler
    }
  });
}

function onReadyHandler() {
  //alert('youtube embedded');
}

function onErrorHandler() {
  //alert('youtube error');
}