Embed Only Audio from YouTube Videos

This post is primarily for Jan as she is going to be posting a audio file on the website for the Business Resource Center in Moab, but it could be useful in the future for those of you who may need to embed audio files. This isn’t the “best” way to embed audio files, but it is probably the easiest from a coding stand point. The first step, which I will not go over, involves creating a “movie” with the audio file and a background image. I used iMovie to make the video, and then uploaded the video to YouTube. So we’ll just assume you already have a YouTube video that you want to embed, but you just want the audio portion and either don’t want or don’t need the video to play.

Getting the Embed Code

The first step as always to embed a YouTube video is to get the embed code from the YouTube website. Go to the page where the video you want to embed is located and click on the “share” button. A second menu should drop down where you have a few options. The only thing that is necessary to change is the size of the player. The problem is that we don’t want to keep the correct ratio of the player because we are trying to hide the video and just have audio. If you want to, you can set the desired width, but we might be changing that later anyway, so it really doesn’t matter what you choose. I am going to change it to 300 pixels wide, however, because the end result looks good around 300 pixels, however as I said, you can always adjust this later.

I would also un-check the box that says: “Show suggested videos when the video finishes.” I don’t like it to show other videos when it’s over because you never know what you will get. If you selected 300 pixels wide you should get a code that looks like this:

< iframe width=”300″ height=”182″ src=”http://www.youtube.com/embed/ygfXKbcW8wQ?rel=0&#8243; frameborder=”0″ allowfullscreen></iframe>

The video should appear about like this wherever you place the embed code:

Step 1

Normal Video Embed

Now that we have our video on our page we just need to make a few minor adjustments. Two actually. First you want to adjust the height to be 24 pixels tall. So I would change the 182 to 24. The video now would look like this on the page:

Step 2

Small video, but overlapping items

Yuck , it’s a mess there and doesn’t really look like you can play it. The easy fix to that is to now add a parameter onto the URL of the video so that the controls show up always. Since the controls are about 24 pixels tall, they will fill the whole player area and it will look like a small embedded player. So you need to add &autohide=0 onto the end of the URL. If the URL doesn’t have any other parameters already listed, you might need to add a question mark in place of theĀ ampersand. I’ll explain that below in a bit more detail so you know what I mean. But first I’ll show you what my new embed code would look:

< iframe width=”300″ height=”24″ src=”http://www.youtube.com/embed/ygfXKbcW8wQ?rel=0&autohide=0&#8243; frameborder=”0″ allowfullscreen></iframe>

And the video now looks like this:

Step 3

No Video, Controls visible

It just looks like a simple audio player and no one would really know the difference. The YouTube logo is still there, but that’s no big deal.

About URL Parameters

In order to tell what exactly you need to add to a URL, you need to understand the basics of how URL parameters work. A normal URL without parameters would normally follow a few constructs, all of which being essentially the same thing.

  1. http://www.domain.com
  2. http://www.sub.domain.com
  3. http://www.domain.com/file.ext
  4. http://www.domain.com/folder
  5. http://www.domain.com/folder/file.ext

All five of these URLs are common place and and all of them can accept parameters. Whether or not the parameters are used is up to the person coding the pages. In fact you can add parameters to any URL and if there is no code to do anything with them, nothing will happen. Life will go on as usual. The only time errors occur is if there is code to handle the parameters AND the parameters are invalid. In order to specify a parameter, we follow a convention that is called a “key=value pair.” This is visible all over the internet, but we can see this on our degree pages. Click on a degree and you will see the key value pair in the URL. The key on our degree pages is “_d” and the value is whatever is after it.

In the simplest sense, the server “sees” that there is a “_d” key being sent and grabs it’s value. It then uses that value to fetch the data for that degree from our database. If you pass in any other “key” the server won’t care because it’s only checking for a key named “_d”. You can pass in any value you want for the “_d” key but if it doesn’t have a match in our database, the server won’t be able to show any degree information.

In order to pass in a key value pair on a URL we must first add a question mark at the end of the URL. Using our examples above this would look like this:

  1. http://www.domain.com?key=value OR http://www.domain.com/?key=value
  2. http://www.sub.domain.com?key=value OR http://www.sub.domain.com/?key=value
  3. http://www.domain.com/file.ext?key=value
  4. http://www.domain.com/folder?key=value OR http://www.domain.com/folder/?key=value
  5. http://www.domain.com/folder/file.ext?key=value

Passing in Multiple URL parameters

Sometimes we need to pass in multiple parameters. In order to do this, each key value pair must be separated by an ampersand. Note, you do NOT separate them by an additional question mark. You can pass in as many parameters as you like. Again, if the server is not set up to handle these parameters, they won’t do any harm… they just won’t do anything. So for our YouTube video, we actually need to pass in two parameters into the video URL. We are passing in a “rel” key with a value of “0” in order to turn off the ability to show related videos after the video finishes playing. We are also passing in a “autohide” key with a value of “0” that tells the player to show the controls all of the time. In other words, autohide is set to off.

You can find YouTube’s full list of URL parameters and other settings on their website. Most free services have similar pages showing the options and settings that you can control. The YouTube player has options for autoplay, color, controls, and all sorts of stuff with which you can customize how the player looks and acts. Most of them you won’t need but it is interesting to try them out and see what they do. All of the options are well documented.

In Summary

I hope this helps you all have a better understanding of how the YouTube player works and what your options are when embedding videos to the websites. You may wonder why I didn’t embed the videos here to show you live examples… well this free wordpress site automatically changes some settings on the YouTube videos that I embed and I don’t have the freedom to change those settings as far as I can tell so I had to use images instead. I test all of them on our site so I know that they work.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: