Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@woeldiche
Last active December 16, 2015 03:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save woeldiche/5367589 to your computer and use it in GitHub Desktop.
Save woeldiche/5367589 to your computer and use it in GitHub Desktop.
Embed vimeo, using JS API to remove itself when finished playing.
<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>
@woeldiche
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment