Fork me on GitHub

Instapoppin' Making Popcorn With Just HTML and CSS

This is similar to the Popcorn 101 tutorial, but doesn't require an author to know JavaScript when making web pages that react to web media.

See the code in action.

For more detailed technical documentation, see the README.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn.js"></script>
    <script src="http://toolness.github.com/instapoppin/instapoppin.js"></script>
  </head>
  <style>
    .footnote { visibility: hidden; }
    .footnote.active { visibility: visible; }
  </style>
  <body>
    <video height="180" width="300" autoplay>
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
    </video>
    <div class="footnote" data-active-during="2-6">Pop!</div>
  </body>
</html>