WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
up vote 5 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

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

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

Try this code. Just copy and paste in a HTML file.

<!DOCTYPE html>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', { // "player" id of youtube player container where video comes using youtube iframe api.
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady, // on ready event below callback function "onPlayerReady" will be called.

        function onPlayerReady(event) { // as youtube player will ready
            $('#play_vid').click(function() {  // it will wait to click on overlay/image
                event.target.playVideo();  // as overlay image clicked video plays.

        $(document).ready(function() {
            $('#player').hide(); // on document ready youtube player will be hiden.
            $('#play_vid').click(function() {  // as user click on overlay image.
                $('#player').show();    // player will be visible to user 
                $('#play_vid').hide(); // and overlay image will be hidden.

    <div id="player"></div> <!-- Youtube player container -->
    <img id="play_vid" src="YOUR_IMAGE_PATH" /> <!-- overlay image that comes in front of youtube video. when user click on this, image will be hidden and video plays using youtube api.-->
share|improve this answer
What exactly is this code doing, how would this solve the issue. File an edit and properly explian what your code does and how it works – Pieter Goosen May 19 '15 at 11:57
Code is updated with comments. On page ready youtube video will be hidden and overlay image will be visible to user. As user click on the image, image will be hidden and youtube video will be played and shown to user. – Muhammad Azeem May 27 '15 at 15:31

protected by Pieter Goosen May 19 '15 at 11:58

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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