Last active
December 16, 2015 03:09
-
-
Save woeldiche/5367589 to your computer and use it in GitHub Desktop.
Embed vimeo, using JS API to remove itself when finished playing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div style="width:100%; height:100%; clear:both; position:absolute; top: 0; left: 0; z-index:99; overflow:hidden;" id="video-layer"> | |
<iframe id="player1" src="http://player.vimeo.com/video/63243786?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=1" width="1200" height="675" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen style="min-height: 100%; max-height: 100%; min-width: 100%; max-width: 100%; width: 100%; height: 100%; position: absolute; z-index: 50;"></iframe> | |
<a class="video-link" href="#" style="position: absolute; z-index: 55; bottom: 10%; left: 10%; color: #fff;">Skip Video</a> | |
</div> | |
<script type="text/javascript"> | |
(function ($) { | |
"use strict"; | |
var f = $('#player1'), | |
url = f.attr('src').split('?')[0]; | |
// Helper object to test for mobile devices. | |
var isMobile = { | |
Android: function() { | |
return navigator.userAgent.match(/Android/i); | |
}, | |
BlackBerry: function() { | |
return navigator.userAgent.match(/BlackBerry/i); | |
}, | |
iOS: function() { | |
return navigator.userAgent.match(/iPhone|iPad|iPod/i); | |
}, | |
Opera: function() { | |
return navigator.userAgent.match(/Opera Mini/i); | |
}, | |
Windows: function() { | |
return navigator.userAgent.match(/IEMobile/i); | |
}, | |
any: function() { | |
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); | |
} | |
}; | |
// Helper functions to set and read cookies. | |
function createCookie(name,value,days) { | |
var expires = ""; | |
if (days) { | |
var date = new Date(); | |
date.setTime(date.getTime()+(days*24*60*60*1000)); | |
expires = "; expires="+date.toGMTString(); | |
} | |
document.cookie = name+"="+value+expires+"; path=/"; | |
} | |
function readCookie(name) { | |
var nameEQ = name + "="; | |
var ca = document.cookie.split(';'); | |
for(var i=0;i < ca.length;i++) { | |
var c = ca[i]; | |
while (c.charAt(0)==' ') { | |
c = c.substring(1,c.length); | |
} | |
if (c.indexOf(nameEQ) == 0) { | |
return c.substring(nameEQ.length,c.length); | |
} | |
} | |
return null; | |
} | |
// Handle messages received from the player | |
function onMessageReceived(e) { | |
var data = JSON.parse(e.data); | |
switch (data.event) { | |
case 'ready': | |
onReady(); | |
break; | |
case 'finish': | |
onFinish(); | |
break; | |
} | |
} | |
function post(action, value) { | |
var data = { method: action }; | |
if (value) { data.value = value; } | |
f[0].contentWindow.postMessage(JSON.stringify(data), url); | |
} | |
function onReady() { | |
post('addEventListener', 'finish'); | |
if (isMobile.any()) { | |
window.setTimeout(post('pause'), 400); | |
} | |
} | |
function onFinish() { | |
$('.frontpage-wrapper').attr('style', 'visible'); | |
$('#video-layer').detach(); | |
createCookie('scopevideo2','played',1); | |
} | |
$(document).ready(function() { | |
var playedStatus = readCookie('scopevideo2'); | |
if (Modernizr.postmessage && playedStatus !== 'played' && document.documentMode != 7) { | |
$('.frontpage-wrapper').attr('style', 'visibility: hidden;'); | |
$('.video-link').bind('click', function (event) { | |
event.preventDefault(); | |
onFinish(); | |
}); | |
// Listen for messages from the player | |
if (window.addEventListener){ | |
window.addEventListener('message', onMessageReceived, false); | |
} | |
else { | |
window.attachEvent('onmessage', onMessageReceived, false); | |
} | |
} else { | |
$('#video-layer').remove(); | |
} | |
}); | |
})(jQuery); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
IE8 in IE7 compat. mode reports true on Modernizr.postmessage, but doesn't actually delivers postMessage support - so added a check for IE8 in compat mode.