gistfile1.txt

When a mobile device is detected, the .loadVideo click event attaches a div#videoOverlay element containing the Youtube embed iframe to the document. The overlay is sized to cover the whole document and the iframe is centered inside it.

#videoOverlay has a click event bound after it is inserted that removes it from the document. This gets around the problem of the close button being unclickable.

handlers.js

    $(".loadVideo").click(function() {
      var $container, leftOff, topOff, url, videoHeight, videoWidth;
      videoHeight = 552;
      videoWidth = 981;
      url = $(this).attr('href');
      if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)) {
        topOff = videoHeight / 2;
        leftOff = videoWidth / 2;
        $('body').append("<div id=\"videoOverlay\"><iframe style=\"margin-top: -" + topOff + "px; margin-left: -" + leftOff + "px;\" width=\"" + videoWidth + "\" height=\"" + videoHeight + "\" src=\"" + url + "?showinfo=0&authohide=1&autoplay=1&rel=0&wmode=opaque\" frameborder=\"0\" allowfullscreen></iframe></div>");
        $('#videoOverlay').click(function() {
          return $(this).remove();
        });
      } else {
        $('.video').fadeOut(350, function() {
          return $(this).remove();
        });
        $("#videoRow").append('<div class="video"></div>');
        $container = $("#videoRow .video");
        $container.hide().append("<a href=\"#\" class=\"closeBtn\">Close</a><iframe width=\"" + videoWidth + "\" height=\"" + videoHeight + "\" src=\"" + url + "?showinfo=0&autohide=1&autoplay=1&rel=0&wmode=opaque\" frameborder=\"0\" allowfullscreen></iframe>").fadeIn();
      }
      return false;
    });

style.css

#videoOverlay {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1337; }
  #videoOverlay iframe {
    position: relative;
    top: 50%;
    left: 50%; }