Navarr's Tech Side The Technical Side of my Life

27Oct/099

YouTube Mini Audio Player

If you read my personal blog (which a lot of you probably don’t even know exists) you’ll commonly see music embedded as mini-YouTube embeds.  It turns out, the magic height is 25 pixels, and the magic width (for play/pause and mute) is 62 pixels.

However, it is kind of a burden to do this every time you want to embed a mini player (you have to edit at four fields in the HTML!)  So to simplify this process, I, like any programmer before me, created a generator.  Just type in the URL to the YouTube video and press make, and you’ll get a preview as well as the cross-browser HTML-esque mess of a code to embed.

Of course, if you’re truly lazy, just drag the bookmarklet below to your bookmark bar in your web browser, and click it on any YouTube video and you’ll be taken to the page with the code already generated.

Generate Mini-Player

Source code is available via link at the bottom of the page.

80x15[1]

class::Scrobbler by Navarr T. Barnier is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Based on a work at gtaero.net.
Permissions beyond the scope of this license may be available at mailto:navarr@koneko-chan.net.
  • Dson

    Is it legal to play the you-tube playlists using this audio player in our own website?

  • Dson

    Hi There… Your code works great…. Can you let me know how to add an option to start a playlist from the middle….I tried adding &start= and #t= parameters as mentioned in google site and it doesn't seem to be working for playlist…any advise will be really helpful…

  • http://tech.gtaero.net/ Navarr Barnier

    I don't see any reason why it would be illegal, and timestamp parameters just won't work with a playlist. Thats a YouTube problem not specific to my script. Sorry.

  • Rafaela_teddy

  • Pingback: My Blog Title

  • Badhabit80817

    Useless unless you want to hear the same thing over and over

  • Pingback: My Blog Title

  • Pingback: negotiating car price

  • Pingback: get skinny fast anorexia

  • wdkm

    this is the business, thanks so much!

    kem
    wdkm.wordpress.com

  • Devin Lyttle

    Forgive me if I’m missing something here, but is it explained anywhere how to generate the grey, expandable audio player beneath the YouTube player? I also noticed in another post of yours that you had a light grey version of the YouTube player, but also didn’t see an explanation of that. Is it as simple as replacing the image that’s referenced in the tag, or is it more complex than that?

    Ideally, I would like to use the expandable player, so if you can give some insight into that I’d appreciate it. 

  • Devin Lyttle

    Forgive me if I’m missing something here, but is it explained anywhere how to generate the grey, expandable audio player beneath the YouTube player? I also noticed in another post of yours that you had a light grey version of the YouTube player, but also didn’t see an explanation of that. Is it as simple as replacing the image that’s referenced in the tag, or is it more complex than that?Ideally, I would like to use the expandable player, so if you can give some insight into that I’d appreciate it.

  • Devin Lyttle

    Please ignore/delete this post; I used the wrong email address