Facebook Style Youtube, Vimeo, Metacafe Videos & Soundcloud Audio Url Expander with jQuery & PHP

Today I am going to share  facebook style url expanding videos using jQuery & PHP. This script will take Youtube, Vimeo, & SoundCloud video url as input and it will return a video as output with automatically fetch the title & description of the respective video.

In my previous post, I had explained how to expand youtube video in facebook style. But here I have done embedding Youtube, Vimeo & Soundcloud videos/audios using permalinks

Facebook Style Vimeo, Youtube & SoundCloud Url Expander

Facebook Style YouTube Video

Facebook Style Youtube Video Expander

Facebook Style Vimeo Video

Facebook Style Vimeo Video Expander

Facebook Style SoundCloud Audio

Facebook Style SoundCloud Audio Expander

Features

1. YouTube Video
2. Vimeo Video
3. SoundCloud Audio

Requirements

1. jQuery
2. SoundCloud Javascript SDK
3. PHP 5+
4. CURL Support – used to fetch title & description of the video & also used to get soundcloud audio file

jQuery Code to Expand YouTube Video

jQuery("a.youtube").live("click", function(){
		var videoURL = jQuery(this).attr("href");
		var regExp_YT = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var youtubeurl = videoURL.match(regExp_YT);
		var videoID = youtubeurl[7];
		var videoWidth = parseInt(jQuery(this).parent().parent().css("width"));
		var videoHeight = Math.ceil(videoWidth*(0.56)+1);
		jQuery(this).parent().hide();
		jQuery(this).parent().next().css('margin-left', '0');
		jQuery(this).parent().parent().prepend('<iframe width="'+videoWidth+'" height="'+videoHeight+'" src="http://www.youtube.com/embed/'+(videoID)+'?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>');
		return false;
});

jQuery Code to Expand Vimeo Video

jQuery("a.vimeo").live("click", function(){
		var videoURL = jQuery(this).attr("href");
		var regExp_VMO = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
		var vimeourl = regExp_VMO.exec(videoURL);
		var videoID = vimeourl[5];
		var videoWidth = parseInt(jQuery(this).parent().parent().css("width"));
		var videoHeight = Math.ceil(videoWidth*(0.56)+1);
		jQuery(this).parent().hide();
		jQuery(this).parent().next().css('margin-left', '0');
		jQuery(this).parent().parent().prepend('<iframe src="http://player.vimeo.com/video/'+videoID+'?portrait=0" width="'+videoWidth+'" height="'+videoHeight+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
		return false;
});

jQuery Code to Expand SoundCloud Audio

jQuery("a.soundcloud").live("click", function(){
		var scURL = jQuery(this).attr("href");
		var obj = jQuery(this);
		obj.parent().hide();
		obj.parent().next().css('margin-left', '0');
		jQuery(this).parent().parent().prepend('<div id="sc_audio"></div>');
  		SC.oEmbed(scURL, {color: "ff0066"},  document.getElementById("sc_audio"));
		return false;
});

PHP Function to get YouTube Thumbnail by Url

function get_youtube_thumbnail($url)
{
	$parse = parse_url($url);
	if(!empty($parse['query'])) {
	preg_match("/v=([^&]+)/i", $url, $matches);
	$id = $matches[1];
	} else {
	//to get basename
	$info = pathinfo($url);
	$id = $info['basename'];
	}
	$img = "http://img.youtube.com/vi/$id/1.jpg";
	return $img;
}
//usuage
echo get_youtube_thumbnail("http://youtu.be/lvOFck4dn_8");

PHP Function to get Viemo Thumbnail by Url

//function is used to get vimeo link ID
function parse_vimeo($link)
{
        $regexstr = '~
            # Match Vimeo link and embed code
            (?:<iframe [^>]*src=")?       # If iframe match up to first quote of src
            (?:                         # Group vimeo url
                https?:\/\/             # Either http or https
                (?:[\w]+\.)*            # Optional subdomains
                vimeo\.com              # Match vimeo.com
                (?:[\/\w]*\/videos?)?   # Optional video sub directory this handles groups links also
                \/                      # Slash before Id
                ([0-9]+)                # $1: VIDEO_ID is numeric
                [^\s]*                  # Not a space
            )                           # End group
            "?                          # Match end quote if part of src
            (?:[^>]*></iframe>)?        # Match the end of the iframe
            (?:<p>.*</p>)?              # Match any title information stuff
            ~ix';

        preg_match($regexstr, $link, $matches);
        return $matches[1];
}

function get_vimeo_thumbnail($url)
{
	$id = parse_vimeo($url);
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_TIMEOUT, 10);
	$output = unserialize(curl_exec($ch));
	$output = $output[0]['thumbnail_medium'];
	curl_close($ch);
	return $output;
}
//usage
echo get_vimeo_thumbnail(&quot;http://vimeo.com/65484727&quot;);

Please see the live demo

View Live Demo

Please comment your thoughts about this script. So that I will make this script available to download

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!