I use a lot of embedded videos (via oembed) on my blog, and that can slow down page loads.

Is there a way to automatically replace YouTube (and other) videos with a thumbnail (preferably the post’s featured image). And then replace the thumbnail with the video iframe when clicked?

Notes

• Solution for YouTube and Vimeo.
• Uses Featured Image or default thumbnail from video provider.
• If more than one oEmbed exists in the same page, using the Featured Image provoques duplicate “thumbs”.
• Post has to be updated before changes are seen.
• To do: <iframe> and <img> sizes, other oEmbeds.

Sources of Inspiration

oEmbed

oEmbed, thumbnails and wordpress

Replace Image with Embed

https://stackoverflow.com/q/838878/1287812

Plugin

<?php
/**
 * Plugin Name: oEmbed Replace Iframe with AutoPlay-Image
 * Plugin URI: https://wordpress.stackexchange.com/q/73996/12615
 * Description: Replaces the iFrame embed with the Featured Image 
 * and if this not exists replaces with the Video Thumbnail
 * Version: 1.0
 * Author: brasofilo
 * Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
 */

//avoid direct calls to this file
if (!function_exists ('add_action')) {
        header('Status: 403 Forbidden');
        header('HTTP/1.1 403 Forbidden');
        exit();
}

add_filter( 'oembed_dataparse', 'wpse_73996_oembed_click2play', 10, 3 );

function wpse_73996_oembed_click2play( $return, $data, $url ) 
{
    // Create Unique ID, case more than one oembed is used in the page 
    // https://stackoverflow.com/questions/3656713/
    $uuid = gettimeofday();
    $uuid = mt_rand() . $uuid['usec'];

    // Use Featured Image, if exists
    // This only works visually if 1 oEmbed per post is used
    $post_thumbnail_id = get_post_thumbnail_id( $_REQUEST['post'] );
    if( $post_thumbnail_id )
    {
        $thumb = wp_get_attachment_image_src( $post_thumbnail_id, 'medium' );
        $image = $thumb[0];
    }

    if( !$image ) 
        $image = $data->thumbnail_url; 

    // YouTube
    if ( $data->provider_name == 'YouTube' ) 
    {
        $autoplay = str_replace('feature=oembed', 'feature=oembed&autoplay=1', $return );

        $return = '<script type="text/javascript">var embedCode' 
            . $uuid . ' = \''
            . $autoplay .'\';</script><div id="videocontainer' 
            . $uuid . '"><img src="'
            . $image
            . '" onclick="document.getElementById(\'videocontainer'
            . $uuid . '\').innerHTML = embedCode'
            . $uuid . ';" height="360" width="480" /></div>';
    }

    // Vimeo
    elseif ( $data->provider_name == 'Vimeo' ) 
    {
        $autoplay = str_replace('" width=", "?autoplay=1" width=", $return );

        $return = "<script type="text/javascript">var embedCode'
            . $uuid . ' = \''
            . $autoplay . '\';</script><div id="videocontainer'
            . $uuid . '"><img src="'
            . $image
            .'" onclick="document.getElementById(\'videocontainer'
            . $uuid . '\').innerHTML = embedCode'
            . $uuid . ';" height="360" width="480" /></div>';
    }
    return $return;
}

Contents of the $data returned by the video providers

stdClass(
    type="video"
    version = 1.0
    provider_name="Vimeo"
    provider_url="http://vimeo.com/"
    title="Earth"
    author_name="Michael König"
    author_url="http://vimeo.com/michaelkoenig"
    is_plus = 1
    html="<iframe src="https://player.vimeo.com/video/32001208" width="540" height="304" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>"
    width = 540
    height = 304
    duration = 300
    description = 'lorem ipsum'
    thumbnail_url="http://b.vimeocdn.com/ts/307/031/307031094_295.jpg"
    thumbnail_width = 295
    thumbnail_height = 166
    video_id = 32001208
)

stdClass(
    provider_url="http://www.youtube.com/"
    thumbnail_url="http://i2.ytimg.com/vi/552yWya5RgY/hqdefault.jpg"
    title="Tu cara me suena - Arturo Valls imita a Rihanna"
    html="<iframe width="540" height="304" src="https://www.youtube.com/embed/552yWya5RgY?fs=1&feature=oembed" frameborder="0" allowfullscreen></iframe>"
    author_name="antena3"
    height = 304
    thumbnail_width = 480
    width = 540
    version = 1.0
    author_url="http://www.youtube.com/user/antena3"
    provider_name="YouTube"
    type="video"
    thumbnail_height = 360
)