Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
would it be ok to popup the video when clicked? would it be ok to use the video's thumbnail? –  Gaia Nov 26 '12 at 21:05
@Richard Please go back and work (comment, accept if it got a solution) on your old questions. –  kaiser Nov 26 '12 at 21:58

5 Answers 5

up vote 3 down vote accepted


  • 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, thumbnails and wordpress

Replace Image with Embed



 * Plugin Name: oEmbed Replace Iframe with AutoPlay-Image
 * Plugin URI: http://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: http://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');

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 
    // http://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

    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="http://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

    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="http://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
share|improve this answer
Dude, thank you sooo much for this! You have no idea how much this helped me out. You should put this plugin up on the wordpress.org site. –  Richard Nov 27 '12 at 17:29
FYI: I found a ridiculously simple trick on Stackoverflow for doing CSS image overlays <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" /> --> stackoverflow.com/questions/403478/css-how-to-overlay-images –  Richard Nov 27 '12 at 17:32
Yes, I thought of that overlay "play" icon but didn't search. Nice addition! –  brasofilo Nov 27 '12 at 17:36
cant seem to get this working in 3.5, anyone else having this issue? –  chrismccoy Feb 24 '13 at 21:33

This is a good method...but a less involved one (for those of us less experienced) would be to use this tutorial.

Do not plug in the YouTube embed code as YT(YouTube) gives it (you can try, but it will be ganky)...instead just replace the source from the embed code of your vid UP TO &amp;autoplay=1 (leave this on the end as it is).


original code YT gives:

<object width="420" height="315">
    <param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>

Code used in tutorial with same YT src:

<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess"value="always" />
    <param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" />
    <embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />

Other than that, just replace the img source and path with your own, and voilà!

share|improve this answer

Here is enhanced verison of brasofilo plugin:

add_filter( 'oembed_dataparse', function($str, $data, $url) {

    if ( ($yt = $data->provider_name == 'YouTube') || ($vm = $data->provider_name == 'Vimeo') ) 
        if($yt) $html = str_replace('feature=oembed', 'feature=oembed&autoplay=1', $str);
        else $html = str_replace('" width=', '?autoplay=1" width=', $str);

        $html = htmlentities($html, ENT_QUOTES);
        $img = $data->thumbnail_url; 
        $title = esc_attr($data->title);

        return '<img src="'. $img . '" onclick="this.outerHTML=\'' . $html . '\'" title="' . $title . '">';

    return $str;

}, 10, 3);

Do not remember to clean oembed cache! You can use this SQL command to do that:

DELETE FROM wp_postmeta WHERE meta_key LIKE '_oembed%'

More info at https://siteorigin.com/clearing-oembed-cache/

share|improve this answer

Here is a WordPress plugin you can download and manually install (it has been submitted for review and should be in the repository soon). I created this today just to handle this situation. No changes to content are needed, this works automatically once activated on any and all iframes.

share|improve this answer

Google Plus uses a good system, but the limitation for my purposes is that it doesn't play well with responsive formatting (e.g., 100% width).

Still, the code works well and if, like G+, one uses a set of image sizes and columns based on browser width, then it can do the job.

Here are two sources that do this:

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.