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
1  
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
1  
@Richard Please go back and work (comment, accept if it got a solution) on your old questions. –  kaiser Nov 26 '12 at 21:58
add comment

2 Answers

up vote 0 down vote accepted

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

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

Plugin

<?php
/**
 * 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');
        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 
    // 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

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="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
)

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="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
1  
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
add comment

This is a good method...but a less involved one (for those of us less experienced) would be to use the tutorial on http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289. 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 "&autoplay=1" (leave this on the end as it is).

eg.)

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></object>`

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" /></object>`

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

share|improve this answer
add comment

Your Answer

 
discard

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.