I'm a volunteer for the non-profit One Laptop per Child.  One of our favorite videos is http://www.youtube.com/watch?v=s4ojFcZIqRU

Instead of adding a few photos using the Photo plugin, I'd like to show the most recent photos.  That way, the video stays current and you can always re-watch the video for some new content!

How do I  make this mash-up?  Here's the step-by-step:

1) Create a new webpage by going to http://jsfiddle.net

2) Add the Popcorn.js library.  Click "Add Resources", paste http://popcornjs.org/code/dist/popcorn-complete.min.js into the textbox, and click the plus button [+]

3) Write the HTML structure of the page.  We just need one section to put the video and one section to put the photos.  

<div id="videoplayer" style="width: 300px; height: 200px; "></div>
Recent Photos
<div id="photo-player"></div>

4) Write the JavaScript code which adds in our YouTube video :

Popcorn(
    Popcorn.youtube(

      "videoplayer",

      "http://www.youtube.com/watch?v=s4ojFcZIqRU",

      { width: 300 }

   )

)

We are sending "videoplayer" to Popcorn because that's the id of the <div> in the HTML that we set up.  We also send the full YouTube URL.  There's also an options object in curly brackets { } which we use to set the width.  You're welcome to change these lines and see what happens.

5)  After that, add the JavaScript which adds the Flickr plugin and starts the video:

    .flickr(  {
        start: 0,
        end: 400,
        userid: '27861585@N02',
        target: 'photo-player'
     } )
    .play();

Again, we use an object (the curly brackets) to send multiple options to Popcorn.  This time we are setting up the Flickr plugin.  Like all other plugins we've seen, there's a start and end for the times when this plugin appears and disappears, in seconds.

The userid on Flickr is a code which includes the @ symbol.  When I went to http://www.flickr.com/photos/olpc  I couldn't find this code, so I scrolled to the bottom of the page and clicked the Subscribe button.  This sends you to a page with a URL like http://api.flickr.com/services/feeds/photos_public.gne?id=27861585@N02&lang=en-us&format=rss_200 which includes id=________

We also send it 'photo-player' because that's the id of the place where we want the photos to appear.

Click "Run" on the top bar to preview your work, and then "Save" or "Update" to get a new URL that links to your saved page.  Here's an example which I made: http://jsfiddle.net/tNhyt/19/

6)  Searching for photos

The Flickr object has more settings.  For example, we can add tags: "mongolia" to only show OLPC's photos with this tag.  Make sure that when you add a new line to the options object, each line has a comma after it, except the last one.  Like any list.  It looks like this:

    .flickr(  {
        start: 0,
        end: 400,
        userid: '27861585@N02',
        target: 'photo-player',

        tags: 'mongolia'

     } )
    .play();

Already I'm thinking it would be cool to have Flickr plus a maps plugin.  So you could show photos and a map of one country, then photos from another country with their map.  In case you're not sure how to show one Flickr for 30 seconds, and then another Flickr for the next 30 seconds, here's how it'd look:

    .flickr(  {
        start: 0,
        end: 30,
        userid: '27861585@N02',
        target: 'photo-player',

        tags: 'mongolia'

     } )

    .flickr(  {
        start: 30,
        end: 60,
        userid: '27861585@N02',
        target: 'photo-player',

        tags: 'ethiopia'

     } )
    .play();

If you set tags to "mongolia,school" it will show only the photos which have both tags.  It's AND, not OR.  So not particularly useful here.

Unfortunately, you must show photos from one specific user for this code to work on jsfiddle.net.   If you have your own website, you can take out the userid line and search all of Flickr.