Create Embed Code out of YouTube and Vimeo URLs


Notice: Trying to access array offset on value of type bool in /home/853194.cloudwaysapps.com/ypzheydydh/public_html/wp-content/plugins/yet-another-stars-rating/public/classes/YasrRichSnippets.php on line 385

Notice: Trying to access array offset on value of type bool in /home/853194.cloudwaysapps.com/ypzheydydh/public_html/wp-content/plugins/yet-another-stars-rating/public/classes/YasrRichSnippets.php on line 386

YouTube and Vimeo are the most popular video-sharing websites from across the internet. They truly changed the world by entertaining, informing and inspiring people through video.

Their scope is more than just showcasing videos. They are platforms for debates, stages for future music stars and veritable virtual classrooms.

Although the platforms are invaded by billions of people each month, videos can be used by other websites as well, through the embed codes. In just a few clicks, you can get an embed code out of YouTube or Vimeo and paste it in your website`s files or on a WordPress blog post.

YouTube Embed Code

Today I want to present you a different way of how to embed such codes into a website. To be more specific, I want to show you how to generate an embed code out of an URL. The technique works for YouTube and Vimeo URLs, but it can be easily expanded to support other video-sharing platforms as well. I`ll try a PHP approach, which can be implemented into any PHP based website, including blogging platforms like WordPress.

Every YouTube or Vimeo URL contains an unique key or ID. We`ll grab this key and use it to generate our own embed code.

Custom YouTube Embed Code

//store the URL into a variable
$url = 'http://www.youtube.com/watch?v=x6qe_kVaBpg';

//extract the ID
preg_match(
		'/[\?\&]v=([^\?\&]+)/',
		$url,
		$matches
	);

//the ID of the YouTube URL: x6qe_kVaBpg
$id = $matches[1];

//set a custom width and height
$width = '640';
$height = '360';

//echo the embed code. You can even wrap it in a class
echo '<div class="youtube-article"><iframe class="dt-youtube" width="' .$width. '" height="'.$height.'" src="//www.youtube.com/embed/'.$id.'" frameborder="0" allowfullscreen></iframe></div>';

Custom Vimeo Embed Code

//store the URL into a variable
$url = 'http://vimeo.com/71673549';

//extract the ID
preg_match(
		'///(www.)?vimeo.com/(d+)($|/)/',
		$url,
		$matches
	);

//the ID of the Vimeo URL: 71673549
$id = $matches[2];

//set a custom width and height
$width = '640';
$height = '360';

//echo the embed code and wrap it in a class
echo '<div class="vimeo-article"><iframe src="http://player.vimeo.com/video/'.$id.'?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=ffffff" width="'.$width.'" height="'.$height.'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>';

If you`re wondering where these functions can be used at, I`ve been successfully tested them into a WordPress theme. The deal was to extend a video blog post format by adding it a custom field for YouTube and Vimeo URL. The user pastes an URL which is converted into embed code and implemented into the blog system. Pretty neat!

Let me know your thoughts about this tutorial and feel free to leave your feedback into the comments section!

Click to rate this post!
[Total: 3 Average: 3.3]

Madalin Tudose

A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.