Home / admin / Add youtube thumbnail posts with custom metabox
  • How to Add youtube thumbnail posts with custom metabox

    add-youtube-thumbnail-posts-with-custom-metabox

    Adding this snippet to the functions.php of your wordpress theme will add a new metabox to your posts that will let you add a youtube video ID eg: oHg5SJYRHA0 to display a thumbnail.

    This was a little snippet I made recently for a client that wanted to display a thumbnail for posts using featured image but a screenshot when they posted a youtube video. To display the youtube screenshot add this to your wordpress theme youtube_thumb('480','360','0'); the values in the function are as follows width, height, screenshot. The 0 is the image preview by default 0 should be the first frame but 1,2,3 etc may also work for the video with preview images throughout the clip.

    ( example screenshot )

    wordpress snippet : PHP

    <>
    	add_action("admin_init", "youtube_init");
    	add_action('save_post', 'save_youtube_link');
    	function youtube_init(){
    		add_meta_box("youtube", "Youtube thumbnail code", "youtube_link", "post", "normal", "high");
    	}
    	function youtube_link(){
    		global $post;
    		$custom  = get_post_custom($post->ID);
    		$link    = $custom["link"][0];
    ?>
    <div class="link_header">
    	<input name="link" class="form-input-tip" value="<?php echo $link; ?>" /><br />
    </div>
    <div class="yt-thumb"><img src="http://img.youtube.com/vi/<? echo $custom['link'][0]; ?>/0.jpg" width="30" height="30" /></div>
    <p>Please place id for the youtube file here! This sample URL ID is hilighted in <span class="yt-id">red</span>. After v= and before & symbol if one exists. <br /> http://www.youtube.com/watch?v=<span class="yt-id">oHg5SJYRHA0</span>&feature=player_embedded</p><div class="yt-clear"></div>
    <?php
    	}
    function save_youtube_link(){
    global $post;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}
    	update_post_meta($post->ID, "link", $_POST["link"]);
    }
    function youtube_thumb($w,$h,$t){
         $custom = get_post_custom($post->ID);
         return '<img src="http://img.youtube.com/vi/'.$custom['link'][0].'/'.$t.'.jpg" width="'.$w.'" height="'.$h.'" />';
    }
    add_action('admin_head', 'youtube_css');
    function youtube_css() {
    	echo'
    	<style type="text/css">
    		.link_header{margin:0px 5px 0px 0px;}
    		.link_header input{
    			font-size:13px;
    			color:#666;
    			border:solid 1px #ccc;
    			-moz-border-radius:3px;
    			padding:2px;
    			margin:0px 10px 0px 0px;
    			width:100%;
    			}
    		.yt-clear{clear:both;}
    		.yt-id{color:#ff0000;font-weight:bold;}
    		.yt-thumb{
    			float:left;
    			margin:6px 6px 0px 0px;
    			border:solid 1px #ccc;
    			}
    	</style>
    	';
    }
    

    wordpress snippet : PHP

    <>
    <?
            echo youtube_thumb('480','360','0');
    ?>
    

    ( WordPress codex functions, hooks, in this snippet. )

    admin_head, init, save_post, get_post, get_post_custom, update_post_meta, add_meta_box, add_action, _e, wp,