John Heaton (jheaton) wrote,
John Heaton
jheaton

REFERENCE: How to Embed YouTube as an Audio Player on LiveJournal

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:

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <div style="position:absolute;top:-276px;left:-5px">
    <iframe width="300" height="300" src="https://www.youtube.com/embed/youtubeID?rel=0">
    </iframe>
  </div>
</div>

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?

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <div style="position:absolute;top:-276px;left:-5px">
    <object width="300" height="300">
      <param name="movie" 
             value="http://www.youtube.com/v/dZhpdI81ShE?version=3&hl=en_US">
      </param>
      <param name="allowFullScreen" 
             value="true">
      </param>
      <param name="allowscriptaccess" 
             value="always">
      </param>
      <embed src="http://www.youtube.com/v/dZhpdI81ShE?version=3&hl=en_US" 
             type="application/x-shockwave-flash" 
             width="300" 
             height="300" 
             allowscriptaccess="always" 
             allowfullscreen="true">
      </embed>
    </object>    
  </div>
</div>

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:

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <object width="300" height="300" 
          style="position:absolute;top:-276px;left:-5px">
    <param name="movie" 
           value="http://www.youtube.com/v/m6dKEb3rHqY?hl=en_US&version=3">
    </param>
    <param name="allowFullScreen" 
           value="true">
    </param>
    <param name="allowscriptaccess" 
           value="always">
    </param>
    <embed src="http://www.youtube.com/v/m6dKEb3rHqY?hl=en_US&version=3" 
           type="application/x-shockwave-flash" 
           width="420" 
           height="315" 
           allowscriptaccess="always" 
           allowfullscreen="true">
    </embed>
  </object>
</div>

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:

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <object width="300" height="300" style="position:absolute;top:-276px;left:-5px">
    <param name="movie" 
           value="http://www.youtube.com/v/aKvq8V29dE0?hl=en_US&version=3">
    </param>
    <param name="allowFullScreen" 
           value="true">
    </param>
    <param name="allowscriptaccess" 
           value="always">
    </param>
    <embed src="http://www.youtube.com/v/aKvq8V29dE0?hl=en_US&version=3"
           type="application/x-shockwave-flash" 
           width="300" 
           height="300" 
           allowscriptaccess="always" 
           allowfullscreen="true">
    </embed>
  </object>
</div>

Which, finally, gets you what you want:

So if you want to do this in your own LJ, just follow these four steps:

  1. Copy the third of the three preformatted text blocks above.
  2. Paste it into your own journal.
  3. 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!
  4. Remove the line breaks from the pasted code
    OR
    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.

Tags: reference, social media: lj
Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 13 comments