Video vom vorgestellten Bild abspielen?

Wenn ich ein YouTube-Video in einen Beitrag einbette, wie setze ich einen Play-Button über das angezeigte Bild, damit das Video abgespielt werden kann, ohne den gesamten Post öffnen zu müssen?

Dh Flipboard die iOS-App verfügt über eine function, mit der Sie Videos von der vorgestellten Bildbühne anschauen können.

Solutions Collecting From Web of "Video vom vorgestellten Bild abspielen?"

Es passiert, dass ich eine ähnliche Frage beantwortet habe.
Und wenn man es ein wenig anpasst, kann etwas ernsthafte Magie passieren;)

Anmerkungen :

  • Das CSS wird inline gedruckt. Es sollte mit der style.css des Themes style.css und entsprechend angepasst werden.

  • Jedes ausgewählte Bild ist in einem div mit id="videocontainer-' . $post_id . '" .

  • und eine Javascript-Variable, die zusammen mit jedem FI gedruckt wird
    var embedCode_' . $post_id .' = \'' . $iframe .'\'; .

  • dann wird der FI durch Javascript mit innerHTML durch den YouTube- innerHTML .

  • andere Notizen und Credits in den Kommentaren.

 < ?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  * - just for demonstrations purposes, include this in your theme style.css! */ public function print_click_to_play_css() { ?>  < ?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 = '