Inspiration

Tumblr has been doing some really great changes to their UI lately, and one of them caught my attention: their new detachable video player! Badass, right?

It got me thinking. Here at ChallengePost, we have tons of hackers posting projects with awesome demo videos. They're the best part of the project pages most of the time!

That said, we do a poor job highlighting them. While browsing long list of projects, there's no way to tell if a hack has a video, and no way to take a quick look at it without leaving the page.

I created this hack to fix that.

How it works

A gif is worth 10 thousands words, so here's what it looks like (sorry for the crappy quality):

http://i.imgur.com/4kynDrd.gif

  • First off, when a hack project has a video, let's show it! I did that with a subtle Play icon on the software thumbnail.
  • Once the Play icon is clicked, I compute the position of the thumbnail relative to the page, and create a new fixed thumbnail at this position. I also start requesting the actual video right away from the back-end, but I noticed that it's better to hold off on displaying it before the animation is done, otherwise it's laggy.
  • The thumbnail is then moved to the bottom right hand corner with a cool animation. I tried this animation with both CSS and JS, but ended up with JS for this hack, it was simpler for me.
  • Once the video player arrived at its final destination, I display the video. Done!

Challenges I ran into

  • Did a first pass with all the animation done in CSS. It was a bit of a pain to be honest, but I would probably still go this way if I had to implement it for real.
  • I stuggled a bit on when to display the actual video. Too early and it's laggy, to late and it feels slow.

Accomplishments that I'm proud of

It's not as polished as the Tumblr version, but I'm pretty happy with it. Looks cool.

What's next for Pop-out video player!

A version of it could hit ChallengePost.com one of these days! We really need to showcase the AWESOME hack videos you guys are making better.

http://i.imgur.com/l7jPMh7.gif

Built With

Share this project:
×

Updates