Overland Park SEO | Kansas City SEO

Kansas City SEOAdd Youtube Videos to Wordpress (Vimeo Videos, too)

Categories Advertisements
Add Youtube Videos to WordPress (Vimeo Videos, too) Published on Tuesday, November 29, 2011 by

Add Youtube Videos to WordPress (Vimeo Videos, too)

[lbmn_commentscount]

Adding an archive of Youtube videos to your WordPress website can be tricky. But here are some instructions to get you going. Always make sure to backup your WordPress before proceeding.

In this tutorial you’ll learn how to:

Add Custom Field for YouTube and Vimeo Unique Video IDs
Add Custom meta box to the post edit form to add your video IDs
Add custom code to your archive pages to display video thumbnail preview images
Add custom code to your single post pages to display the videos as you wish

Simple right?

Here’s an example.

Add Custom Fields & Meta Box Via Functions.php

First off, you need to attach the unique video ID to a post. You could use a new category and just place the code into “the_content” and then base the archive and single page code off of the category ID, but what this method will allow you to have the same category, or multiple categories and be backwards compatible. ie, It’ll check to see if the post has a youtube ID listed, and if so, display from your custom code, if not, you can display “the_content” and any other code you want.

Add this bit of code to your “functions.php” file. You’ll be adding the metabox for the custom field and then saving the data to the post.

// Create the Video Information Meta Box by hooking into the admin menu for a post
add_action(‘admin_menu’, ‘video_add_box’);

//Function call by the “add_action” to tell it what to add, “video_information” and where “post”
function video_add_box(){
add_meta_box(‘video_information’, ‘Video Information’, ‘video_information’, ‘post’, ‘normal’, ‘high’);
}

//function to populate the meta box added above
function video_information(){
global $post;

// Noncename needed to verify where the data originated
echo ‘‘;

//adds the custom field _youtubeID plus some other stuff
$youtubeID = get_post_meta($post->ID, ‘_youtubeID’, true);
if ( empty($youtubeID) ) {
$youtubeID = ”;
}

//adds the custom field _vimeoID
$vimeoID = get_post_meta($post->ID, ‘_vimeoID’, true);
if ( empty($vimeoID) ) {
$vimeoID = ”;
}

//add the box
echo ‘
‘;
echo ‘Youtube ID: ‘;
echo ‘
‘;
echo ‘Vimeo ID: ‘;
echo ‘
‘;
} //end video_information function

//save_video_meta is called below with the action “save_post” and saves your IDs to the post
function save_video_meta($post_id, $post) {
// verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times

if ( !wp_verify_nonce( $_POST[‘video_noncename’], plugin_basename(__FILE__) )) {
return $post->ID;
}

// Is the user allowed to edit the post or page?

if ( !current_user_can( ‘edit_post’, $post->ID )){
return $post->ID;
}

$video_meta[‘_youtubeID’] = $_POST[‘_youtubeID’];
$video_meta[‘_vimeoID’] = $_POST[‘_vimeoID’];
foreach ($video_meta as $key => $value) { // Cycle through the $video_meta array
if( $post->post_type == ‘revision’ ) return; // Don’t store custom data twice

$value = implode(‘,’, (array)$value); // If $value is an array, make it a CSV

if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
update_post_meta($post->ID, $key, $value);
} else { // If the custom field doesn’t have a value
add_post_meta($post->ID, $key, $value);
}
if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
}//endforeach video meta

} //end save_video_meta

//save the video custom fields
add_action(‘save_post’, ‘save_video_meta’, 1, 2);

Add YouTube & Vimeo to Single.php WordPress Posts

Now on to the good stuff. For this particular example you can get all the information on customizing the embedded object in the youtube documentation over here and for embedding vimeo into your wordpress site you can get the options over here.

We’ll be building our embed code from the ID and whatever options we want. I have chosen some width and height options and some other basic options for both vimeo and youtube and put them in below.

ID, ‘_youtubeID’, true);
$vimID = get_post_meta($post->ID, ‘_vimeoID’, true);
if ($ytubeID || $vimID){
if ($ytubeID){
$ytube = ‘http://www.youtube.com/v/’.$ytubeID.’?fs=1&hd=0′;
echo ‘
‘;
echo ‘‘;
echo ‘‘;
echo ‘‘;
echo ‘‘;
echo ‘‘;
echo ‘‘;
echo ‘
‘;
} elseif ($vimID){
echo ‘
‘;
echo ‘‘;
}//end if yutbeID or vimIDthe_excerpt(); //excerpt added for information
?>

Add Small Thumbnail Video Images with Play Button on Archives Pages

This one takes a little more customization. You’ll need to have cURL enabled on your server. Most PHP installs have this running but if you don’t, you’ll have to have your server admin get it going for you. Check out cURL Manual if you want to know more information.

Both youtube and vimeo allow you to grab the screen shots used for preview of their videos. For youtube they are at http://img.youtube.com/vi/youtubeID/0.jpg For more just change the the #.jpg. I stick with 0 which is the larger one and allows me to mess with sizing more than the mini images.

For vimeo you have to go and pull the information from their api which can be found in their API documenation. From there you build the correct URL using the $vimID obtained from the custom field and you return the php version from vimeo. Then you pull the bits you want, in this case the video thumbnail, and then your good to go.

Also in this, I use a play button with the image below and style it in my “style.css” file with the following.

span.playbutton{position:absolute; left:5%; top:7%; filter:alpha(opacity=70); opacity: 0.7;}

Then add this to the archive pages. You may need to select for specific categories and if you have some videos that don’t have Vimeo or YouTube IDs you may need to add some if statements to display “the_content()” if there is no ID in the custom field of the post.


ID, ‘_youtubeID’, true);
$vimID = get_post_meta($post->ID, ‘_vimeoID’, true);
if ($ytubeID){
$ytube = ‘http://img.youtube.com/vi/’.$ytubeID.’/0.jpg’;
echo ‘

‘;
echo ‘

‘;
echo ‘

‘;
} elseif ($vimID){
$info = ‘thumbnail_large’;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, “http://vimeo.com/api/v2/video/$vimID.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][$info];
curl_close($ch);
echo ‘

‘;
echo ‘

‘;
echo ‘

‘;
}
endwhile; ?>

Using the above code, you should be able to pull videos into your wordpress site using just the youtube or vimeo video ID and be able to customize the look and feel of the output for future updates to both services. You should also be able to pull thumbnail previews into archive pages, sidebars or wherever you want them using a simple cURL pull.

Any questions, don’t hesitate to ask.

[lbmn_postpagination]

[lbmn_authorbio]

About us and this blog

Kimberly Kimbrough LLC is a full service agency that delivers compelling digital marketing solution. Our winning solutions and experience helps to deliver great results across several key areas.

Request a free quote

We offers professional SEO services that help websites increase organic search drastically and compete for 1st page rankings of highly competitive keywords.

20+

sidebar widgets

YouTube Gamers Should Be Apart Of Your Digital Strategy

Many business owners may not be aware of unique ways to think…
Continue reading

Top Ten SEO Tips For 2015

We live in a world where information is a click away. But…
Continue reading

Trends in SEO Marketing : Part One

The current trends in marketing require companies to commit to innovation in…
Continue reading

Custom Meta Data

META DATA It is important to add Meta Data to your custom…
Continue reading

Google + Basic Strategies

Use Google+Local –Google+ should be used to generate reviews/testimonials.  Google reviews drive…
Continue reading

Is Search Engine Submission Necessary?

The simple answer is no - search engine submission isn’t necessary. The majority of…
Continue reading

Can Any Inbound Linking Hurt My Ranking?

The answer is simple - inbound linking cannot hurt your search ranking. How…
Continue reading

The Importance of Anchor Text in Back-links

The importance of anchor text with respect to a linking strategy cannot be overstated.…
Continue reading
[lbmn_commentscount]
 

Leave a Comment

No comments currently exist for this post.
Leave your comment:
You must be logged in to post a comment.