Turning Web Video On Its Head

Published 7 years, 10 months ago

Here’s some fun.  (For a sufficiently nerdy definition of “fun”.)

  1. Launch Safari 4 or Chrome 4.

  2. Drag Videotate to the bookmarks bar.

  3. Go opt into the YouTube HTML5 beta.

  4. Find your favorite YouTube video.  Or maybe your least favorite.  Here’s one of my favorites: Walk Don’t Run.  Here’s another that’s not necessarily a favorite, but it seems like a fairly appropriate choice.

    Note: not all videos are available via HTML5, even when you’re opted in.  If you get a Flash video, the bookmarklet won’t work.

  5. Once the video has started playing, activate the “Videotate” bookmarklet.

  6. Enjoy.

Thanks to Simon WIllison for tweeting the JS I modified, and Jeremy Keith for helping me realize it would be easy to do during the HTML5 portion of A Day Apart.


  1. It’s even more fun than you think! Try clicking the bookmarklet more than once!

  2. I’m sorry… I tried this and it is not working for me. Says it can’t find elementbytagname(‘video’)

    I am opted in to html5, using safari, clicked on one of your youtube links.

  3. Whoops—it turns out that some of the videos I linked are not available in HTML5, only Flash. I’ll update the links, but try “Walk Don’t Run”—that’s the one that consistently works for me. Thanks for the heads-up, Joe!

  4. Works great in Chrome 4 too.

  5. Ah, good point, Paul. Post updated to reflect that!

  6. Thanks, Eric. I noticed supported videos say “html5” during the loading screen.

  7. Phenomenal. Thanks for posting!

    -FS

  8. Even better: change ‘video’ in the script to ‘body’ and watch the whole page turn…

    Doesn’t require HTML 5 video, just a webkit-based browser and any webpage.

  9. Geoff: that’s exactly what Simon tweeted (see link in original post). I went the other way, because I wanted to see videos rotate while playing. Which they do, if not completely smoothly.

  10. […] Turning Web Video On Its Head […]

  11. So very cool and simple. It’s a great time to be a web professional, isn’t it? Things like this just make me smile about the future of our profession; it’s become more fun all over again. Thanks for sharing, Eric. :)

  12. Brilliant fun! Nothing like watching your favourite video as it spins round slowly :-)

  13. […] Turning Web Video On Its Head […]

  14. One could argue the first video is very appropriate too with the Japanese word ‘maware’ meaning turn or spin.

  15. Nice, Eric!

    Here’s a version that offloads the animations to the graphics card by using CSS Animations (since this is already Webkit Only):

    javascript:(function(){var%20lastSheet=document.styleSheets[document.styleSheets.length-1];lastSheet.insertRule(%22@-webkit-keyframes%20themeyerspin%20{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(359deg);}}%22,lastSheet.cssRules.length);var%20styles={webkitAnimationIterationCount:'infinite',webkitAnimationDuration:'18s',webkitAnimationName:'themeyerspin',webkitAnimationTimingFunction:'linear'};for(style%20in%20styles){document.getElementsByTagName('video')[0].style[style]=styles[style];}})();

    Also, if you only want to target YouTube specifically, then there’s a version of Videotate which will rotate the HTML5 videos and Flash videos equally well:

    javascript:(function(){var%20lastSheet=document.styleSheets[document.styleSheets.length-1];lastSheet.insertRule(%22@-webkit-keyframes%20themeyerspin%20{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(359deg);}}%22,lastSheet.cssRules.length);var%20styles={webkitAnimationIterationCount:'infinite',webkitAnimationDuration:'18s',webkitAnimationName:'themeyerspin',webkitAnimationTimingFunction:'linear'};for(style%20in%20styles){document.getElementById('watch-player').style[style]=styles[style];}})();

    I tried to post the bookmarklets as links, but your site smartly prevents javascript URLs in comments in order to keep your readers safe.

    Finally, I suppose a Firefox 3.5+ version is a moot point because YouTube is not currently serving things in the Ogg format. But all you’d have to do is use -moz-transform instead of -webkit-transform.

Leave a Comment

Management reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>


Comment Preview

If you're satisfied with what you've written, then go ahead...