¿Cómo reemplazar videos de YouTube con una miniatura "Click para reproducir"?

Question

¿Cómo reemplazar videos de YouTube con una miniatura "Click para reproducir"?

26 nov 2012, 22:24:20

Vistas: 28.2K

Votos: 5

Uso muchos videos incrustados (a través de oembed) en mi blog, y eso puede ralentizar la carga de las páginas.

¿Hay alguna manera de reemplazar automáticamente los videos de YouTube (y otros) con una miniatura (preferiblemente la imagen destacada de la entrada)? Y luego reemplazar la miniatura con el iframe del video cuando se hace clic?

Richard

167

miniaturas youtube oembed

Comentarios

¿Estaría bien que apareciera un popup del video al hacer clic? ¿Estaría bien usar la miniatura del video?

Gaia

26 nov 2012 23:05:28

@Richard Por favor, vuelve y trabaja (comenta, acepta si tiene una solución) en tus preguntas anteriores.

kaiser

26 nov 2012 23:58:00

Todas las respuestas a la pregunta

Comentarios

¡Hermano, muchísimas gracias por esto! No tienes idea de cuánto me ayudó esto. Deberías subir este plugin al sitio wordpress.org.

Richard

27 nov 2012 19:29:18

Para tu información: encontré un truco ridículamente simple en Stackoverflow para hacer superposiciones de imágenes con CSS <img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" /> --> http://stackoverflow.com/questions/403478/css-how-to-overlay-images

Richard

27 nov 2012 19:32:48

Sí, pensé en ese icono de "play" superpuesto pero no busqué. ¡Buen añadido!

brasofilo

27 nov 2012 19:36:08

no parece funcionar en 3.5, ¿alguien más tiene este problema?

chrismccoy

24 feb 2013 23:33:08

Aquí está la versión mejorada del plugin brasofilo:

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);

¡No olvides limpiar la caché de oembed! Puedes usar este comando SQL para hacerlo:

DELETE FROM wp_postmeta WHERE meta_key LIKE '_oembed%'

Más información en https://siteorigin.com/clearing-oembed-cache/

pravdomil

121

4 mar 2015 21:03:05

Este es un buen método... pero uno menos complicado (para aquellos de nosotros con menos experiencia) sería usar este tutorial.

No introduzcas el código de inserción de YouTube tal como lo proporciona YT (YouTube) (puedes intentarlo, pero quedará defectuoso)... en su lugar, simplemente reemplaza la fuente del código de inserción de tu video HASTA &autoplay=1 (deja esto al final tal como está).

Ejemplo:

Código original que proporciona YouTube:

<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>

Código utilizado en el tutorial con la misma fuente de YouTube:

<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>

Aparte de eso, solo reemplaza la fuente de la imagen y la ruta con la tuya, ¡y voilà!

user41133

1

30 oct 2013 19:08:16

Prueba este código. Solo copia y pégalo en un archivo HTML.

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <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" es el id del contenedor del reproductor de YouTube donde se muestra el video usando la API de iframe.
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady, // Cuando esté listo, se llamará a la función de callback "onPlayerReady".
                }
            });
        }

        function onPlayerReady(event) { // Cuando el reproductor de YouTube esté listo
            $('#play_vid').click(function() {  // Esperará a que se haga clic en la superposición/imagen
                event.target.playVideo();  // Cuando se haga clic en la imagen de superposición, el video se reproducirá.
            });
        }

        $(document).ready(function() {
            $('#player').hide(); // Al cargar el documento, el reproductor de YouTube estará oculto.
            $('#play_vid').click(function() {  // Cuando el usuario haga clic en la imagen de superposición.
                $('#player').show();    // El reproductor será visible para el usuario 
                $('#play_vid').hide(); // y la imagen de superposición se ocultará.
            });
        });
    </script>

    <div id="player"></div> <!-- Contenedor del reproductor de YouTube -->
    <img id="play_vid" src="RUTA_DE_TU_IMAGEN" /> <!-- Imagen de superposición que aparece frente al video de YouTube. Cuando el usuario hace clic en ella, la imagen se oculta y el video se reproduce usando la API de YouTube. -->
</body>
</html>

Muhammad Azeem

101

19 may 2015 14:54:20

Comentarios

¿Qué hace exactamente este código y cómo resolvería el problema? Realiza una [edición] y explica adecuadamente qué hace tu código y cómo funciona

Pieter Goosen

19 may 2015 14:57:23

El código se ha actualizado con comentarios. Cuando la página está lista, el video de YouTube estará oculto y la imagen de superposición será visible para el usuario. Cuando el usuario haga clic en la imagen, esta se ocultará y se reproducirá y mostrará el video de YouTube.

Muhammad Azeem

27 may 2015 18:31:05

brasofilo 22.1K · Accepted Answer · 2012-11-27T01:13:12Z

Notas

Solución para YouTube y Vimeo.
Utiliza la imagen destacada o la miniatura por defecto del proveedor de video.
Si existe más de un oEmbed en la misma página, usar la imagen destacada provoca miniaturas duplicadas.
El post debe actualizarse antes de ver los cambios.
Por hacer: tamaños de <iframe> y <img>, otros oEmbeds.

Fuentes de Inspiración

oEmbed

oEmbed, miniaturas y WordPress

Reemplazar Imagen con Embed

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

Plugin

<?php
/**
 * Plugin Name: oEmbed Reemplazar Iframe con Imagen de AutoReproducción
 * Plugin URI: https://wordpress.stackexchange.com/q/73996/12615
 * Description: Reemplaza el embed de iFrame con la Imagen Destacada 
 * y si no existe, la reemplaza con la Miniatura del Video
 * Version: 1.0
 * Author: brasofilo
 * Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
 */

//evitar llamadas directas a este archivo
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 ) 
{
    // Crear ID único, en caso de que se use más de un oEmbed en la página
    // https://stackoverflow.com/questions/3656713/
    $uuid = gettimeofday();
    $uuid = mt_rand() . $uuid['usec'];

    // Usar Imagen Destacada, si existe
    // Esto solo funciona visualmente si se usa 1 oEmbed por post
    $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;
}

Contenido de `$data` devuelto por los proveedores de video

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
)

¿Cómo reemplazar videos de YouTube con una miniatura "Click para reproducir"?

Notas

Fuentes de Inspiración

oEmbed

Reemplazar Imagen con Embed

Plugin

Contenido de $data devuelto por los proveedores de video

Contenido de `$data` devuelto por los proveedores de video