title: Click to play YT video and hide div
body: <p>Not my first post here but lost login credentials so starting again.</p>
  
  <p>What I need to achieve is to combine some raw Javascript with JQuery. I have a YouTube video (iframe) and my customer wants this overlayed with a div with HTML content, then on click of an image within the overlayed div play the video and hide the overlayed div.</p>
  
  <p>Here is what I have so far.</p>
  
  <pre><code>&lt;iframe src="//www.youtube.com/embed/6TgyvSQlJtI?wmode=transparent&amp;enablejsapi=1&amp;rel=0&amp;autohide=1" frameborder="0" allowfullscreen id="video"&gt;&lt;/iframe&gt;
  
  $( document ).ready(function() {
  $('#education-graphic').click(function() {
      $('#video-content-overlay').fadeOut('fast');
  }); 
  $('#video-back').click(function() {
      $('#video-content-overlay').fadeIn('fast');
  }); 
  });
  
  
  var player;
  function onYouTubePlayerAPIReady() {
  player = new YT.Player('video', {
  events: {
  'onReady': onPlayerReady
  }
  });
  }
  function onPlayerReady(event) {
  var playButton = document.getElementById("education-graphic");
  playButton.addEventListener("click", function() {
  player.playVideo();
  });
  var pauseButton = document.getElementById("video-back");
  pauseButton.addEventListener("click", function() {
  player.pauseVideo();
  });
  }
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  </code></pre>
  
  <p>The problem is on the ipad where the two click events are attached to the same element, so I need some way of either hiding and showing the div with raw js or playing and pausing the video with jquery.</p>
  
  <p>Yep, I know JQuery is JS, but I am having problems getting this to work.</p>
  
  <p>Cheers in advance for any help with this.</p>