Comments on: Turning Web Video On Its Head http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/ Things that Eric A. Meyer, CSS expert, writes about on his personal Web site; it's largely Web standards and Web technology, but also various bits of culture, politics, personal observations, and other miscellaneous stuff Tue, 18 Jun 2013 15:30:40 +0000 hourly 1 http://wordpress.org/?v=3.5.1 By: Zachary Johnson http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-497246 Zachary Johnson Tue, 20 Apr 2010 15:45:33 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-497246 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.

]]> By: UltraBob http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-497188 UltraBob Mon, 19 Apr 2010 22:00:58 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-497188 One could argue the first video is very appropriate too with the Japanese word ‘maware’ meaning turn or spin.

]]> By: Spin your video :: Thimbles & Care http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-497165 Spin your video :: Thimbles & Care Mon, 19 Apr 2010 15:34:19 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-497165 [...] Turning Web Video On Its Head [...]

]]> By: Alex http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496859 Alex Wed, 14 Apr 2010 08:47:24 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496859 Brilliant fun! Nothing like watching your favourite video as it spins round slowly :-)

]]> By: Billee D. http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496841 Billee D. Tue, 13 Apr 2010 23:54:01 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496841 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. :)

]]> By: Some links for light reading (14/04/10) | Max Design http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496835 Some links for light reading (14/04/10) | Max Design Tue, 13 Apr 2010 21:23:42 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496835 [...] Turning Web Video On Its Head [...]

]]> By: Eric Meyer http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496754 Eric Meyer Mon, 12 Apr 2010 15:26:15 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496754 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.

]]> By: Geoff Pack http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496437 Geoff Pack Fri, 09 Apr 2010 09:22:31 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496437 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.

]]> By: Fake Sigi http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496284 Fake Sigi Wed, 07 Apr 2010 23:13:05 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496284 Phenomenal. Thanks for posting!

-FS

]]> By: Joe http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496281 Joe Wed, 07 Apr 2010 22:29:57 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496281 Thanks, Eric. I noticed supported videos say “html5″ during the loading screen.

]]> By: Eric Meyer http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496280 Eric Meyer Wed, 07 Apr 2010 22:17:17 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496280 Ah, good point, Paul. Post updated to reflect that!

]]> By: Paul D, Waite http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496279 Paul D, Waite Wed, 07 Apr 2010 22:09:31 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496279 Works great in Chrome 4 too.

]]> By: Eric Meyer http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496277 Eric Meyer Wed, 07 Apr 2010 21:56:17 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496277 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!

]]> By: Joe http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496275 Joe Wed, 07 Apr 2010 21:47:27 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496275 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.

]]> By: Bryan Davis http://meyerweb.com/eric/thoughts/2010/04/07/turning-web-video-on-its-head/#comment-496262 Bryan Davis Wed, 07 Apr 2010 19:03:25 +0000 http://meyerweb.com/eric/thoughts/?p=1314#comment-496262 It’s even more fun than you think! Try clicking the bookmarklet more than once!

]]>