Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Popcorn.js Documentation
CSS Shell
branch: gh-pages

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
addon-development [#958911] Add some media wrapper docs and deprecate the player docs, …
media-wrappers Correct link to JWPlayer
modules [#958911] Add some media wrapper docs and deprecate the player docs, …
plugins Unify the way in which the unities of the start and end options are s…
popcorn-constructor [#958911] Add some media wrapper docs and deprecate the player docs, …
utility-methods [#958911] Add some media wrapper docs and deprecate the player docs, …
AUTHORS Fixed things maruku was complaining about, documented on,off,emit, ch…
index.css Internal nav changes
mobile.css not bug r=jbuck update

Popcorn.js Documentation

The Popcorn.js documentation was written using Jekyll, YAML Front Matter and the liquid templating system.


  • Ruby - I would recommend using RubyGems
  • Jekyll - sudo gem install jekyll if you run into any issues, take a look here
  • Pygments - used for styled code samples, take a look at the installation instructions

Setting Up a Local Instance

If you want to setup a local instance to test with run the following command (after installing all of the requirements listed above):

jekyll serve --baseurl '/popcorn-docs'

This will setup up a local copy of the documentation that can be accessed at http://localhost:4000/popcorn-docs/

Writing Documentation

All of our documentation is written in Markdown and is organized into the following format (for the most part):

// This is the title of the item we are documenting
// this ends up being the id for the generated element on the page, so be sure to make it unique!
title: Footnote

// Title as it will appear on the page, probably the same as the above title
# Footnote #

// A header for the purpose
## Purpose ##

// A brief explanation of what this method/function/etc is supposed to do
Adds text to an element on the page.

// A header for the options (if there is any)
## Options ##

// If there are any options that need to be explained (function parameters, object properties, etc) do it here
// A bulleted list describing each option
// Be sure to specify the desired type(s) i.e Number
* **start** \[Number\] - The time you want the footnote to appear.
* **end** \[Number\] - The time you want the footnote to be hidden.
* **text** \[String\] - The text you want to appear in the target.
* **target** \[String\] - The id of the document element that the text is to be attached to. This target element must exist on the DOM

// Provide a brief code sample and/or a jsfiddle showcasing a live example
## Example ##

// Be sure to wrap any code snippets in the following line of liquid templating code
// to make sure that we get code highlighting and line numbers
{% highlight js linenos %}
    var p = Popcorn( "#video" ).footnote({
      start: 5,
      end: 15,
      text: 'This text will appear in "target". ',
      target: "footnotediv"
// also be sure to close it once your code snippet is done
{% endhighlight %}


Something went wrong with that request. Please try again.