Video + Reveal

Because playing a video inside of a modal window makes perfect sense.

Basic Example

Let's trigger a reveal modal with a simple button. No special styling.

Example Modal w/Video...

This modal has embedded video

×

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> tag.

<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">&times;</a>
</div>

JavaScript

In order for this to work correctly, we only need to make sure the following call is in our global or common js file.

$('[data-tube]').tube();

Theater Example

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">&times;</a>
</div>