Turning Web Video On Its Head
Published 14 years, 8 months pastHere’s some fun. (For a sufficiently nerdy definition of “fun”.)
Launch Safari 4 or Chrome 4.
Drag Videotate to the bookmarks bar.
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.
Once the video has started playing, activate the “Videotate” bookmarklet.
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.
Comments (15)
It’s even more fun than you think! Try clicking the bookmarklet more than once!
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.
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!
Works great in Chrome 4 too.
Ah, good point, Paul. Post updated to reflect that!
Thanks, Eric. I noticed supported videos say “html5” during the loading screen.
Phenomenal. Thanks for posting!
-FS
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.
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.
Pingback ::
Some links for light reading (14/04/10) | Max Design
[…] Turning Web Video On Its Head […]
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. :)
Brilliant fun! Nothing like watching your favourite video as it spins round slowly :-)
Pingback ::
Spin your video :: Thimbles & Care
[…] Turning Web Video On Its Head […]
One could argue the first video is very appropriate too with the Japanese word ‘maware’ meaning turn or spin.
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-transforminstead of-webkit-transform.