Facebook Style Youtube, Vimeo, Metacafe, Dailymotion & 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, Metacafe, & Dailymotion 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, Metacafe & Dailymotion videos/audios using permalinks

Facebook Style YouTube Video

Facebook Style Vimeo Video

Facebook Style SoundCloud Audio

Features

1. YouTube Video
2. Vimeo Video
3. SoundCloud Audio
4. Metacafe Video
5. DailyMotion Video

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

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!