CODEWITHSUNDEEP
jqueryyoutubeyoutube-channels
jbwharris
jbwharris

Reputation: 720

Reformat a YouTube URL using jQuery

I am using the YouTube Channel jQuery( http://plugins.jquery.com/project/ChannelPlaylist ) script to pull in data from a YouTube channel. Then I'm using an iFrame on the page to display the videos without leaving the site. The only problem is that the URLs the Channel plugin is pulling in don't quite work with my iFrame concept. They load the whole YouTube page instead of just the video. I figured out a workaround that basically I reformat the URL and tell it to display fullscreen and to autoplay will do what I would like it to do.

The URLs are currently formatted like

http://www.youtube.com/watch?v=xxxxxxxxx&feature=youtube_gdata

and I need them to be rewritten as

http://www.youtube.com/v/xxxxxxxxx?fs=1&autoplay=1

I've seen a couple of similar topics here on SO, but given my limited jQuery and regex talents I wasn't able to get anything to work for my purposes.

Upvotes: 1

Views: 1035

Answers (4)

tster
tster

Reputation: 18237

You should probably use the standard embedding code to embed a video on your page: http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=57788

Example:

<object width="1280" height="745">
    <param name="movie" value="http://www.youtube.com/v/PoyiR3ob7yk?fs=1&amp;hl=en_US&amp;rel=0"> </param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/PoyiR3ob7yk?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed>
</object>

Note, on the youtube site there is also a way to embed using iframes.

Upvotes: 0

German Rumm
German Rumm

Reputation: 5822

You need Javascript, not jQuery for that.

var v = "http://www.youtube.com/watch?v=xxxxxxxxx&feature=youtube_gdata".match(/v=(.*)&/)[1];
var url = "http://www.youtube.com/v/" + v + "?fs=1&autoplay=1"

Upvotes: 2

Cole
Cole

Reputation: 740

Use the jQuery oEmbed Plugin.

http://code.google.com/p/jquery-oembed/

Then you can just apply the iFrame to a desired element

$("#my-video-div").oembed('youtube url');

the Plugin will create the iFrame for you as opposed to dynamically instering the iFrame src.

If you look at the standard you tube embed code it provides a different url than the regular url. For exmaple this is what is actually embed in the iframe for you tube.

http://www.youtube.com/v/PoyiR3ob7yk?fs=1&hl=en_US

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

You could use a function like this to get the value for the URL vairable v and just reconstruct the url. Instead of using the window.location, just use the returned YouTube URL

var url = 'http://www.youtube.com/v/' +  v + '?fs=1&autoplay=1'

Upvotes: 0

Related Questions