zurb/foundation — Issue #227: HTML5 YouTube embedded player and Reveal
Author: gorelog
Created: 2012-01-13 17:42:07+00:00
State: open

When using the Reveal with an embedded YouTube HMLT5 (fleshless) video, the Youtube overlay (the semitransparent black header with the tile of the video and author) is still visible where the video would be displayed in the modal. I'm sure the same things may happen when using other iframe code on modals.

My solutions was this:

app.js

// Hide the reveal by default
$('#my-reveal'').hide();

// Reveal trigger
$('#show-my-reveali').click(function() {
$('#my-reveal').reveal().show();
});

// Hide the reveal on close after the rollup
$('#my-reveal').find('a.close-reveal-modal').click(function(){
setTimeout(function(){ $('#my-reveal').hide(); } ,200);
});

Hope this helps someone.

Thanks for the tools Zurb.