When I wrote yesterday’s post, I wanted a way for people to hear 's "Procession of the Nobles." It's a pretty well-known piece, but not everyone knows the names of songs, especially when it comes to classical music. It was easy enough to find a recording I liked on YouTube, but the "video" was just a portrait of Rimsky-Korsakov. I remembered having seen audio-only YouTube videos posted on other sites, and I thought that'd be a nice thing to do in this case, because who wants to look at a picture of Rimsky-Korsakov for four minutes and 36 seconds? So I went looking for how to do it. And obviously I succeeded:
But it took a little experimentation to get it to work on LiveJournal, so I'm going to talk a bit about what I did to get it to work so I can refer back to it in the future, and so other LJ users can use the same technique on their own pages. In the following examples, I will use three songs I recently purchased from amazon.com, because why not. Please don't judge me.
My search led me to How to Embed YouTube as an Audio Player, at Amit Agarwal's Digital Inspiration blog. He recommended using CSS to hide the video part of the video, leaving only the play bar:
But one problem: the <iframe> tag doesn't work on LiveJournal. Inconvenient! But just replacing the iframe code with the old embed code should work, right?
And it sort of does:
But the problem here is that it doesn't show the play bar; it shows the title of the video, which, if clicked on, opens the video in a new tab, which to my way of thinking defeats the purpose of the exercise. If that's what I wanted, I'd just link to it. So I decided to try applying the style from the second <div> tag to the <object> tag:
Which gets you this:
That's better, in that clicking anywhere in the bar starts the music playing without opening the video in a new tab. But the progress bar takes up most of the space, and the controls only appear when you hover over the bar with the mouse. That's because I made a mistake: I changed the width and height attributes in the <object> tag, but not in the <embed> tag. So one more try:
Which, finally, gets you what you want:
So if you want to do this in your own LJ, just follow these four steps:
- Copy the third of the three preformatted text blocks above.
- Paste it into your own journal.
- Change the video ID in the pasted code to the video ID of the video you want to embed. Don't forget it appears both in the first <param> tag and the <embed> tag!
- Remove the line breaks from the pasted code
use the "disable autoformat" option. If you don't do this, the play bar won't render at the right height and you probably won't be able to find the play button.
That's it! Have fun with it.