While I was procrastinating on my essay for GSW, I’ve made a couple slight changes to the YouTube Audio Player that should make it a little better.
Firstly, I’ve given you the ability to allow YouTube to set cookies. I’m not sure why anyone would be interested in doing this for a Music player, but its there. I guess the primary reason I set this is because youtube-nocookie wasn’t working properly the other day, as I soon found out from a comment on my blog. So if it isn’t showing up, you should allow YouTube to collect cookies.
The second, and by far the more important change is embedding the link (in the event that neither the object nor the embed shows) in a <noembed> tag. I’m not quite sure how I didn’t know about the existence of this tag, but I’ve gone ahead and programmed it in properly, which should get rid of the annoying duplication some users have been seeing on any players generated from this point forward.
And one last change I made while working on this blog post, I created an API! So now you can generate them on the fly if you want to and get just the HTML for the player. I’ll document the API below:
- The URL to the YouTube Video or Playlist
- Only Add if you want the music to AutoPlay
- Only Add if you want the music to Loop
- Add if you want to enable the Progress Bar on the video.
- &psize= This is the progress bar size, acceptable variables are below
- s – Small, This will set the width of the video to 150px
- m – Medium, This will set the width of the video to 187px
- l – Large, This will set the width of the video to 224px
- &tc =1
- Only Add if you also want to show a timecode. Only works with progress bar. Changes the follow sizes to the corresponding pixels:
- s – 225px
- m – 262px
- l – 299px
- Add if you want to make the player invisible. Note: People hate this.
- Add if you want to use YouTube’s HTML5 player. You shouldn’t use this. Its VERY buggy.
- Add if you’re okay with YouTube setting cookies on the user’s computer.
And that’s all! Enjoy!
The generator now also supports a Progress Bar and Time Code in three different sizes.
The YouTube Audio Player has gotten three much-needed updates.
- Playlist Support
The first two, Autoplay and loop – which is self-explanatory, are checkboxes that allow you to enable them. (You’ll need to click Make to update the embeddable code).
The third, Playlist Support is fairly self-explanatory. This allows you to embed not just a single video, but an entire playlist using the audio player. There are two ways to use this feature. Either enter the URL of a playlist URL, or the URL of a video in a playlist and check the “Entire Playlist” option.
Of course, with these updates comes an update (hopefully the last) to the bookmarklet, which can be added to your browser bar by dragging this link: Generate 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.
Source code is available via link at the bottom of the page.
Based on a work at gtaero.net.
Permissions beyond the scope of this license may be available at mailto:[email protected].