Video + Reveal
Because playing a video inside of a modal window makes perfect sense.
This is using a combination of patterns, so to put it together, we start with a reveal trigger. Could be a button, image, anything wrapped in an
<a href="#" data-reveal-id="videoModal">Example Modal w/Video...</a>
Now let's construct the modal itself.
<div id="videoModal" class="reveal-modal small" data-reveal> <h2>This modal has embedded video</h2> <div data-tube data-video-id="oQiET7VhHIg"></div> <a class="close-reveal-modal">×</a> </div>
In order for this to work correctly, we only need to make sure the following call is in our global or common js file.
We do offer an alternative styling to the Reveal + Video pattern, and that's the Theater style. What we do here is modify the reveal style to feature the video content front and center. No more, no less. Let's set up our modal trigger.Theater Example
All we need to do to accomplish this is add a
.theater class to our modal markup.
<div id="videoModal" class="reveal-modal theater large" data-reveal> <div data-tube data-video-id="bUhKFNy6Igo"></div> <a class="close-reveal-modal">×</a> </div>