A coworker sent over a link to this Starbucks ad campaign, interested to know more about the technology behind the YouTube integration. So of course I pulled it apart to get down to the secret guts.

Basically, it’s an external web page, hosted on Amazon S3 and Cloudfront, that YouTube is just embedding as an iframe on Starbucks’ YouTube channel. This is the source page:

https://d1q1o5x4z5xc35.cloudfront.net/?frame=true&lang=en&hl=en&gl=US

This interactive wrapper, built by Stopp/Family, pulls in unlisted YouTube videos using API calls to control stuff. Below are the source videos.

Main: https://www.youtube.com/watch?v=9300ZA1z74Y

Rebuilding Memories: https://www.youtube.com/watch?v=JG6bzo5KpFA

Postcrossers: https://www.youtube.com/watch?v=rT_hNNpDKxo

In Harmony: https://www.youtube.com/watch?v=NeUVHX8OBt8

Finding Understanding: https://www.youtube.com/watch?v=wFVn7Ly4iSQ

Open Roads: https://www.youtube.com/watch?v=bwHcWwDDy9U

A Common Cause: https://www.youtube.com/watch?v=2Z0tUFHVngE

T.P.U.G: https://www.youtube.com/watch?v=EMdsPQzXZ_E

Remade in America: https://www.youtube.com/watch?v=xHKRRx-W3ZA

And a weird aside – they’re self-hosting all the caption files and calling them separately. It looks like this is so that the subtitle/caption layer can live at the same layer as the interactive wrapper, and not at the level of the videos themselves. Since the wrapper steals input away from the YouTube source videos (which is what keeps you from being able to click theYouTube logo), this makes sense.

So there you go, that’s how it’s done. But even with all that, you still have to have a friend at YouTube who’ll embed that iframe for you – the general public can’t just go around embedding external content on their channels.