If You Start Playing…

nait­ian.hol­i­day

I dis­cov­ered early December 2018 that there ex­isted .christmas and .holiday TLDs. Naturally, I had to pur­chase one, so I sprung for the non-de­nom­i­na­tional (and, more im­por­tantly, cheaper) nait­ian.hol­i­day domain.

The next ques­tion, of course, was what I should do with it. I ended up us­ing it for two pro­jects, so I def­i­nitely got my mon­ey’s worth. One of the pro­jects was if you start play­ing.

if you start play­ing…

If you start play­ing YouTube Rewind 2018 at 11:53 and 2 sec­onds on New Year’s Eve, Will Smith will say “uhhhh that’s hot” at ex­actly mid­night.

— Fab NZ (@fab_nz) December 31, 2018

Inspired by this meme for­mat, I de­cided to make a New Year’s count­down that would au­to­mat­i­cally start play­ing these videos at the cor­rect time.

Here are the specs for the pro­ject:

specs

1. client side: it re­ally does­n’t need a back­end, and I wanted to host on S3, serve through CloudFront, etc.
2. cus­tomiz­able: I want to be able to share links to cus­tom videos / timestamps.
3. dark theme: for the night­time count­down, of course.

tech

Building out the ap­pli­ca­tion was ac­tu­ally pretty straight­for­ward, thanks to the Youtube iframe API.

To make it cus­tomiz­able and all on the client side, I used window.location to get URL pa­ra­me­ters.

let url = new URL(window.location.href);
if (url.searchParams.get('custom')) {
   const id = url.searchParams.get('id');
   const timestamp = url.searchParams.get('timestamp');
   vid = {
       id,
       timestamp
   }
} else {
    // Get from list of presets
}

You can check it out at nait­ian.hol­i­day/​iysp/?​pre­set=umich.

The Github Repo.