It happens that I answered a similar Question.
And adapting it a little bit, some serious magic can happen 😉
Notes:
-
the CSS is being printed inline. It should go with the theme’s
style.cssand be adapted accordingly. -
each Featured Image is encapsulated in a
divwithid="videocontainer-' . $post_id . '". -
and a Javascript variable in printed together with each FI containing
var embedCode_' . $post_id .' = \'' . $iframe .'\';. -
then, the FI is replaced with the YouTube
iframevia Javascript usinginnerHTML. -
other notes and credits in the comments.
<?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( "https://wordpress.stackexchange.com/", __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="https://wordpress.stackexchange.com/questions/78140/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
);
}
}