Using Mozilla Popcorn Maker to Create an Interactive Video

I’ll be teaching a workshop on Mozilla Popcorn Maker soon and, as is my habit, I created this step-by-step tutorial. Here’s the tutorial in handout form as a PDF, and here it is in Word, in case you’d like to modify it.

Mozilla Popcorn Maker allows you to enrich a video with interactive maps, images, and webpages. Your video could be different every time it’s played, because it pulls in dynamic content and allows your “viewer” to interact with it. Here, we learn how to use it to enhance an archival video.

Sign up for an account


Go to You can work on a Mozilla Popcorn Maker project without logging in, but you can’t save it. So go ahead and sign up for an account. (Mozilla uses the identity manager Persona, so you may only need to enter your email address.)

Choose a video to serve as the basis of your project


With Popcorn Maker, you layer media on top of sound or video, which can come from a number of places. As the icons indicate, you can easily use video from YouTube, Vimeo, or SoundCloud, just by pasting in the link. Somewhat less obviously, you can use video from a place like the Internet Archive, which uses HTML5 to display its video. Let’s look at how to do this.

Grab a video from the Internet Archive


Once you’ve found a video you like on the Internet Archive, copy the link by right-clicking on the Ogg Video link and selecting Copy Link Address from the context menu. Then paste the link into your Popcorn Maker project and click on Create Clip.

Drag your video from the Media Gallery to the timeline


Drag it to Layer 0.

Explore your options


Once you’ve dragged your video to the timeline, you’ll see the Clip Editor in the Events pane.

  1. Fallback is where you can list another URL in case the browser you’re using doesn’t support HTML5. For Internet Archive videos, you can insert the URL for the MP4 version of your video in the same way you selected the .ogv version.
  2. By default, Popcorn Maker includes the first 30 seconds of your clip in your project. You can extend this time or shorten it by using this scrubber. It’s not a full-fledged editing tool, but you can select only a portion of your video if you’d like.
  3. If you’d like, you can turn the video portion of your clip off.
  4. … and you can do the same thing with the audio, as well as turn the volume down.
  5. Here’s where you can change the title of your clip.
  6. Here, you can specify that you’d like time in your project before or after your video ends.

Making sense of the timeline


This image shows what a timeline from a completed project — with a number of different media assets — might look like.

  1. You assemble your project in layers. Layers with lower numbers appear above layers with a higher number. So layer one appears on top of layer two.
  2. You can zoom in on part of your timeline by using this scrubber. This makes it easier to work with events of shorter duration.

Add some text to your video


If you click on the Events tab, you’ll see that you have the option to add some text to your video.

Explore your options


Once you start typing your text, you’ll see that you have a number of different options. You can change the time when your text starts and ends, move it around on the canvas, and change the way it transitions on and off the page. You can also provide a link for the viewer to click. Under the Advanced tab, you can change the font and color.

Add an article from Wikipedia


You can also add a Wikipedia article, which the viewer can interact with as the video plays. Be sure to give the viewer enough time to explore the article.

Add a map


You can also add a Google map, which your viewers can interact with as the video plays. As I write this, choosing any of the Stamen map options causes Popcorn Maker to crash, so be sure to save your work before you select this option.

Add a popup


A popup is a bit of text you can position on the page, kind of like VH1’s Pop-Up Videos. You can customize the popup’s look and feel with icons and transitions.

Add an image


Add an image by dragging it from your desktop. You can also choose to display a Flickr slideshow, which will display images that are either tagged with a word you choose or from a specific URL.

Replay snippets with a loop


With a loop, you can specify that you’d like part of your video to repeat.

Pause for as long as you want.


Once the pause is complete, your video will pick up where it left off.

Save and share your project


If you click on the Project tab, you’ll see that you can add descriptive information about your project, tweet the link, share it on Google Plus, or get the code to embed it on a website. Because your project is authored in HTML5, you can also see all its source code. Click on the green arrow button to see what your project looks like in its completed state.

Other people can remix your work


Completed projects include a remix button, with which anyone on the Internet can use your content to create a new version of your project.

11 Replies to “Using Mozilla Popcorn Maker to Create an Interactive Video”

  1. Hi:

    I am interested to create a site to exhibit scroll paintings. Can you give some suggestion on how to build such a site using HTML5?


  2. Thanks for the detailed tutorial, will surely point my students here next time I introduce Popcorn – -and what a treat to know you can bring in Internet Archive video, since its not easy to embed from the main site.

    The thing about Popcorn is (a mistake I made on the first [disasterous] assignment I gave) that it is not a substitute for a video editor– if you go beyond one maybe two video clips, you will experience a lot more stuttering and mis aligned transitions (Popcorn needs to preload all video). I’ve done a few that have worked with one video as audio only, but once you start tossing video clips in the timeline, it really chokes.

    It’s better to think of it as you have shown here, to augment and remix a video.

    Thanks again.

  3. Is there a way to create a project and have it play offline? As a stand alone project, that is. If not, any suggestions as to what I may use for that sort of thing?

Leave a Reply

Your email address will not be published. Required fields are marked *