Skip to content
This repository

Make Popcorn with just HTML and CSS.

branch: gh-pages

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 map-experiment
Octocat-spinner-32 test
Octocat-spinner-32 tutorial
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
Octocat-spinner-32 instapoppin.js
Octocat-spinner-32 popcorn.js
README.md

Instapoppin' is a ridiculously simple script that lets you synchronize Web pages to media without needing to know any JavaScript.

See the tutorial to learn about basic usage.

Motivation

Whenever I use Popcorn, I find myself using the footnote and code plugins a disproportionate amount. Much of the metadata I pass in to these plugins also feels more like semantic markup than JavaScript code.

Eventually I realized that I could get most of what I needed simply by enabling classes at the proper intervals in a video, and allowing CSS to do most of the heavy lifting.

At the same time, I also know a lot of folks who know HTML and CSS but are very uncomfortable with JavaScript. So I figured I could also help them out by making a simple drop-in script that lets them get a lot of Popcorn's functionality without needing to write any JS.

Dependencies

  • Instapoppin's only dependency is popcorn.js without any plugins.

Durations

The data-active-during attribute is pretty flexible, and you can specify time intervals in a variety of formats. Here's some example values:

  • 2-6 means seconds two thru six.
  • 1:02-1:06 means one minute and two seconds thru one minute and six seconds.
  • 32- means thirty-two seconds thru the end of the media.
  • 1-2, 3-5 means seconds one thru two and seconds three thru five.
  • -0.5 means the beginning of the media thru half a second in.

Sync Sources

By default, Instapoppin' assumes the first media element in the page (audio or video) is the one to be synchronized against. However, if you have multiple media elements on the page, you can give one of them the primary-sync-source class to force Instapoppin' to use it.

Troubleshooting

I've attempted to make Instapoppin' provide good error feedback if it gets confused. Check your browser's error console if it seems to behave oddly. And if you're not sure what's wrong, feel free to file a bug.

More Demos

The Mas Bebes video makes use of Instapoppin' to drastically reduce the size of its JavaScript codebase.

Something went wrong with that request. Please try again.