meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Turning Web Video On Its Head

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.

15 Responses»

    • #1
    • Comment
    • Wed 7 Apr 2010
    • 1503
    Bryan Davis wrote in to say...

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

    • #2
    • Comment
    • Wed 7 Apr 2010
    • 1747
    Joe wrote in to say...

    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
    • Comment
    • Wed 7 Apr 2010
    • 1756
    Eric Meyer wrote in to say...

    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
    • Comment
    • Wed 7 Apr 2010
    • 1809
    Paul D, Waite wrote in to say...

    Works great in Chrome 4 too.

    • #5
    • Comment
    • Wed 7 Apr 2010
    • 1817
    Eric Meyer wrote in to say...

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

    • #6
    • Comment
    • Wed 7 Apr 2010
    • 1829
    Joe wrote in to say...

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

    • #7
    • Comment
    • Wed 7 Apr 2010
    • 1913
    Fake Sigi wrote in to say...

    Phenomenal. Thanks for posting!

    -FS

    • #8
    • Comment
    • Fri 9 Apr 2010
    • 0522
    Geoff Pack wrote in to say...

    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
    • Comment
    • Mon 12 Apr 2010
    • 1126
    Eric Meyer wrote in to say...

    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
    • Pingback
    • Tue 13 Apr 2010
    • 1723
    Received from Some links for light reading (14/04/10) | Max Design

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

    • #11
    • Comment
    • Tue 13 Apr 2010
    • 1954
    Billee D. wrote in to say...

    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
    • Comment
    • Wed 14 Apr 2010
    • 0447
    Alex wrote in to say...

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

    • #13
    • Pingback
    • Mon 19 Apr 2010
    • 1134
    Received from Spin your video :: Thimbles & Care

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

    • #14
    • Comment
    • Mon 19 Apr 2010
    • 1800
    UltraBob wrote in to say...

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

    • #15
    • Comment
    • Tue 20 Apr 2010
    • 1145
    Zachary Johnson wrote in to say...

    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

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


April 2010
SMTWTFS
February May
 123
45678910
11121314151617
18192021222324
252627282930  

Sidestep

Feeds

Extras