碰巧我回答了similar Question.
再稍加调整，就会产生一些真正的魔法；）
Notes:
CSS正在内联打印。它应该符合主题style.css 并进行相应的调整。
每个特色图像都封装在一个div带id="videocontainer-\' . $post_id . \'".
和Javascript变量一起打印，每个FI包含var embedCode_\' . $post_id .\' = \\\'\' . $iframe .\'\\\';.
然后，FI被YouTube取代iframe 通过Javascript使用innerHTML.
注释中的其他注释和注释。
<?php
/**
* Plugin Name: Featured Image to YouTube Player
* Plugin URI: https://wordpress.stackexchange.com/q/78140/12615
* Description: Swaps the Featured Image by a YouTube player (click to load/play).
Needs a custom field with a YouTube video ID \'youtube\'
* Version: 1.0
* Author: brasofilo
* Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
* Licence: GPLv2 or later
* Notes:
Plugin skeleton from Plugin Class Demo (https://gist.github.com/3804204), by toscho.
CSS Overlay images (http://stackoverflow.com/q/403478), by Tim K.
Extracting image attributes from Html (http://stackoverflow.com/a/10131137), by hackre.
*/
add_action(
\'plugins_loaded\',
array ( BL_Featured_Youtube_Thumb::get_instance(), \'plugin_setup\' )
);
class BL_Featured_Youtube_Thumb
{
/**
* Plugin instance.
*
* @see get_instance()
* @type object
*/
protected static $instance = NULL;
/**
* URL to this plugin\'s directory.
*
* @type string
*/
public $plugin_url = \'\';
/**
* Path to this plugin\'s directory.
*
* @type string
*/
public $plugin_path = \'\';
/**
* Access this plugin’s working instance
*
* @wp-hook plugins_loaded
* @since 2012.09.13
* @return object of this class
*/
public static function get_instance()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}
/**
* Used for regular plugin work.
*
* @wp-hook plugins_loaded
* @since 2012.09.10
* @return void
*/
public function plugin_setup()
{
$this->plugin_url = plugins_url( \'/\', __FILE__ );
$this->plugin_path = plugin_dir_path( __FILE__ );
add_filter(
\'post_thumbnail_html\',
array( $this, \'thumbnail_to_youtube\' ) ,
10, 5
);
add_action(
\'wp_head\',
array( $this, \'print_click_to_play_css\' )
);
}
/**
* Constructor. Intentionally left empty and public.
*
* @see plugin_setup()
* @since 2012.09.12
*/
public function __construct() {}
/**
* Filters post_thumbnail_html
* If the post contains a Custom Field (\'youtube\') with a video ID, replacement is done
*/
public function thumbnail_to_youtube( $html, $post_id, $post_thumbnail_id, $size, $attr )
{
$yt = get_post_meta( $post_id, \'youtube\', true );
// Post without YT ID, exit earlier
if( !$yt )
return $html;
// Extract info from the html source
$atts = $this->get_html_img_attributes( $html );
// Overlay for Featured Image
// $click_to_play = $this->plugin_url . \'click-to-play.png\';
// $click_to_play = get_stylesheet_directory_uri() . \'/click-to-play.png\';
$click_to_play = \'http://upload.wikimedia.org/wikipedia/commons/thumb/archive/4/47/20051015080301%21PNG_transparency_demonstration_1.png/120px-PNG_transparency_demonstration_1.png\';
// Render final output
$output = $this->get_featured_yt_thumbnail( $html, $click_to_play, $atts, $post_id, $yt );
return $output;
}
/**
* Print inline CSS in frontend <head>
* - just for demonstrations purposes, include this in your theme style.css!
*/
public function print_click_to_play_css()
{
?>
<style>
a.gallerypic{
width:inherit;
text-decoration:none;
position:relative;
display:block;
float:left;
}
a.gallerypic span.zoom-icon{
visibility:hidden;
position:absolute;
left:35%;
top:35%;
}
a.gallerypic:hover span.zoom-icon{
visibility:visible;
}
</style>
<?php
}
/**
* Generate the Html for the Featured Image thumbnail.
* Prints one javascript line per thumbnail (not sure if the best method)
*/
private function get_featured_yt_thumbnail( $html, $img, $atts, $post_id, $yt )
{
$iframe = \'<iframe title="" class="youtube-player" type="text/html" width="\'
. $atts[\'width\']
. \'" height="\'
. $atts[\'height\']
. \'" src="http://www.youtube.com/embed/\'
. $yt
. \'?autoplay=1" frameborder="0" allowFullScreen></iframe>\';
$return = \'
<div id="videocontainer-\' . $post_id . \'">
<a href="javascript:void(0)" onclick="document.getElementById(\\\'videocontainer-\' . $post_id
. \'\\\').innerHTML = embedCode_\'.$post_id.\';" class="gallerypic" title="">
<img src="\' . $atts[\'src\'] . \'" height="\' . $atts[\'height\'] . \'" width="\' . $atts[\'width\'] . \'" alt="\' . $atts[\'alt\'] . \'" class="pic" />
<span class="zoom-icon">
<img src="\' . $img . \'" width="160" height="120" alt="Zoom">
</span>
</a>
</div>
<script type="text/javascript">var embedCode_\'
. $post_id
. \' = \\\'\'
. $iframe
. \'\\\';</script>\';
return $return;
}
/**
* Extract image attributes from Html
* @author hackre
* @url http://stackoverflow.com/a/10131137/1287812
*/
private function get_html_img_attributes( $html )
{
$xpath = new DOMXPath( @DOMDocument::loadHTML( $html ) );
$src = $xpath->evaluate( "string(//img/@src)" );
$alt = $xpath->evaluate( "string(//img/@alt)" );
$width = $xpath->evaluate( "string(//img/@width)" );
$height = $xpath->evaluate( "string(//img/@height)" );
return array(
\'src\' => $src
, \'alt\' => $alt
, \'width\' => $width
, \'height\' => $height
);
}
}
