Tuesday, October 27, 2009

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.

style="padding-bottom: 0px; margin: 0px auto; padding-left: 0px; width: 62px; padding-right: 0px; display:
block; float: none; padding-top: 0px"
id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:483cec9e-036b-43a9-b49a-eb9506b37975"
class="wlWriterEditableSmartContent">
name="movie" value="http://www.youtube-nocookie.com/v/4pXfHLUlZf4&hl=en&fs=1&rel=0"> name="allowFullScreen" value="true"> src="http://www.youtube-nocookie.com/v/4pXfHLUlZf4&hl=en&fs=1&rel=0"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="62"
height="25">[audio on youtube]

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.

href="javascript:document.location='http://gtaero.net/ytmusic/?q=' + document.location">Generate
Mini-Player

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

style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px;
border-left-width: 0px" title="80x15[1]" border="0" alt="80x15[1]"
src="http://tech.gtaero.net/wp-content/uploads/2009/10/80x151.png" width="80" height="15" />


xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/Text" property="dc:title"
rel="dc:type">class::Scrobbler by rel="cc:attributionURL" property="cc:attributionName" xmlns:cc="http://creativecommons.org/ns#">Navarr T.
Barnier is licensed under a rel="license">Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Based on a work at xmlns:dc="http://purl.org/dc/elements/1.1/">gtaero.net.
Permissions beyond the
scope of this license may be available at rel="cc:morePermissions" xmlns:cc="http://creativecommons.org/ns#">mailto:[email protected].

28 comments:

  1. DsonFebruary 27, 2010 at 3:16 AM

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

    ReplyDelete
  2. DsonMarch 2, 2010 at 2:43 AM

    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...

    ReplyDelete
  3. Navarr BarnierMarch 2, 2010 at 2:45 AM

    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.

    ReplyDelete
  4. Rafaela_teddyMarch 26, 2011 at 6:49 PM

    http://www.youtube.com/watch?v=_YtzsUdSC_I

    ReplyDelete
  5. My Blog TitleApril 6, 2011 at 5:38 PM

    Title...

    I saw this really great post
    today. Thank you for that....

    ReplyDelete
  6. Badhabit80817June 21, 2011 at 2:48 PM

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

    ReplyDelete
  7. My Blog TitleJune 24, 2011 at 11:55 PM

    Another Title...

    I saw this really
    good post today....

    ReplyDelete
  8. negotiating car priceJuly 2, 2011 at 1:30 AM

    negotiating car price...

    I like the
    helpful info you provide in your articles....

    ReplyDelete
  9. get skinny fast anorexiaJuly 14, 2011 at 4:58 AM

    Dear webmaster...

    thanks for the hard
    work you do to keep this alive updated regularly....

    ReplyDelete
  10. wdkmAugust 6, 2011 at 4:31 PM

    this is the business, thanks so much!

    kem
    wdkm.wordpress.com

    ReplyDelete
  11. Devin LyttleOctober 26, 2011 at 4:37 PM

    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.

    ReplyDelete
  12. Devin LyttleOctober 26, 2011 at 4:38 PM

    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.

    ReplyDelete
  13. Devin LyttleOctober 26, 2011 at 4:40 PM

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

    ReplyDelete
  14. thaimassageMarch 22, 2012 at 11:20 AM

    thaimassage...

    [...]m My wife and i
    felt really fulfilled that Chris managed to carry out his inv vi[...]...

    ReplyDelete
  15. TimMay 1, 2012 at 10:31 PM

    Is there any way to get this to work with the new iframe system youtube has implemented
    (html5)? i am hoping there is so it can be used with mobile devices as well as computers.

    thanks!
    if you get a chance to answer please send me an email at [email protected]

    ReplyDelete
  16. JJMay 10, 2012 at 1:09 PM

    Great code, but when I try and do this, the audio quality is noticeably worse on this
    mini player than the original YouTube video. Have you any idea why - and how to fix? I've tried appending
    &hd=1 and &ap=%2526fmt%3D18 and &ap=%2526fmt%3D22 but none of these supposed fixes
    work. Thanks in advance for help.

    ReplyDelete
  17. Navarr BarnierMay 10, 2012 at 1:11 PM

    If you could include the sample ID so I can test I'd be more than happy to look at a
    fix.
    -----
    Navarr T. Barnier
    [email protected]
    http://navarr.me/

    ReplyDelete
  18. JJMay 10, 2012 at 1:21 PM

    Thanks for the quick reply. The video I'm trying to embed is
    http://www.youtube.com/watch?v=swcULf1ATyU&hd=1.

    ReplyDelete
  19. Navarr BarnierMay 10, 2012 at 1:30 PM

    I've added an "Embed in High Definition" checkbox and from my testing it works just
    like on the YouTube video and embeds in 720p. I personally couldn't notice a difference in sound.
    -----
    Navarr
    T. Barnier
    [email protected]
    http://navarr.me/

    ReplyDelete
  20. JayBMay 12, 2012 at 5:42 PM

    Hi Guys,

    I played a bit with the HTML5-Stuff and created this:

    [youtube
    http://www.youtube.com/watch?v=VIDEO-ID?autoplay=1&loop=1&w=57&h=23]

    You
    need to replace the VIDEO-ID with the video-ID, for example with -t9yemi_K8c

    This
    creates a Play/Pause Button with the linked Video.
    autoplay=1 activates the autostart
    loop=1
    activates the looping of the soundtrack.

    I don't know why, but this doesn't work with
    every video. You need to test it. If
    http://www.youtube.com/embed/VIDEO-IDworks, this thing will
    work.

    Example on my Page:
    jaybsound.de

    ReplyDelete
  21. JayBMay 12, 2012 at 5:54 PM

    Update:

    You need to add
    html5=1
    so that the
    user is forced to use Youtube-HTML5

    New Code:
    [youtube
    http://www.youtube.com/watch?v=-t9yemi_K8c?autoplay=1&loop=1&html5=1&w=57&h=23]

    ReplyDelete
  22. JayBMay 12, 2012 at 5:58 PM

    There is this HTML-Stuff added to my code...
    delete the
    "amp;"
    after
    the
    &

    then it will work...

    ReplyDelete
  23. xxlOctober 19, 2012 at 3:52 AM

    Hi.


    Your generator is smart and YouTube
    Audio
    Player is very usable.


    Just 2 questions:






    1.
    When you generate it
    from YouTube playlist, a
    Navbar (Previous and Next track) will be more than
    appreciated. It will be ideal. Don’t you intend
    to implement this?


    2.
    Even if I select the
    checkbox
    “Embed in High Definition”, it plays music in the quality
    corresponding to 240p video. 360p or
    480p quality music sounds much better.





    Thank
    you in advance


    BR

    ReplyDelete
  24. kkJanuary 31, 2013 at 4:23 PM

    hi! the code works great via the desktop, but when you view the desktop version of the
    site on a mobile device the player isnt visible. please help :)


    http://blindat29.blogspot.com

    ReplyDelete
  25. Get Latest News Around The WorldFebruary 1, 2013 at 7:01 PM

    [...] Source: http://tech.navarr.me/2009/10/youtube-mini-audio-player.html [...]

    ReplyDelete
  26. BlahFebruary 8, 2013 at 4:57 PM

    Hi. I tried using this on my tumblr, but it didn't work as the width was perfect, but
    the height was the same. I basically got a long thin strip of youtube video.

    ReplyDelete
  27. Navarr BarnierFebruary 8, 2013 at 5:23 PM

    This normally means that your stylesheet (css) is overriding the height.
    You
    may need to tweak your theme slightly.

    ReplyDelete
  28. yxyxyxApril 5, 2013 at 12:04 PM

    Hi there,

    I've been using your audio player for quite a while.
    Unfortunately, it seems as if it stopped working a few days ago? Is that possible? Possibly because of a
    change that YouTube made? Any help would be greatly appreciated.

    ReplyDelete

Subscribe to: Post Comments (Atom)