manishval/gist:feef603e1d38662e7fad

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    Add the following HTML to the homepage, immediately after the <body> tag.
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="mask" style="display: none;">&nbsp;</div>
<div class="popup-video" style="display: none;">
<iframe id="vimeo-player" src="//player.vimeo.com/video/115014610?title=0&byline=0&api=1&player_id=vimeo-player&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Add the play button right after p.large-text. You can replace the word Play with an image.
<a href="#" class="play-button">Play</a>
Add the following CSS:
.popup-video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  margin: 0 10%;
  overflow: hidden;
}

.popup-video>* {
  height: 100%;
  width: 100%;
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: #000;
  opacity: 0.9;
}
Add the following javascript:
function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

//
// Uncomment to autoplay video. I could not test this 
// since I could not embed the Vimeo javascript API. 
// If you have problems, leave it commented.
//
// var iframe = $('#vimeo-player')[0];
// var player = $f(iframe);
// player.addEvent('ready', function() {});
//

$(document).on('click', '.play-button', function(e) {
  e.preventDefault();
  $('.popup-video, .mask').fadeIn('slow', function() {
    // Uncomment the line below to autoplay
    // player.api('play')
  });
});

$(document).on('click', '.mask', function() {
  // Uncomment the line below to pause
  // player.api('pause');
  $('.popup-video, .mask').fadeOut('slow');
});
And the coffescript version of the above javascript. I haven't tested this coffescript code. I used an online converter. If this doesn't work, add the javascript above on the homepage within a <script></script> tag.
addEvent = (element, eventName, callback) ->
  if element.addEventListener
    element.addEventListener eventName, callback, false
  else
    element.attachEvent eventName, callback, false
  return

#
# Uncomment to autoplay video. I could not test this,
# since I could not embed the Vimeo javascript API. 
# If you have problems, leave it commented.
#
# iframe = $("#vimeo-player")[0]
# player = $f(iframe)
# player.addEvent "ready", ->
#
  
$(document).on "click", ".play-button", (e) ->
  e.preventDefault()
  $(".popup-video, .mask").fadeIn "slow", ->
    # Uncomment the line below to autoplay
    # player.api('play')
  return

$(document).on "click", ".mask", ->
  # Uncomment the line below to pause
  # player.api('pause');
  $(".popup-video, .mask").fadeOut "slow"
  return