web-dev-qa-db-ja.com

YouTubeの動画を「クリックして再生」のサムネイルに置き換える方法は？

私は私のブログで（oembedを介して）多くの埋め込みビデオを使っています、そしてそれはページロードを遅くすることができます。

自動的にYouTube（およびその他の）動画をサムネイル（できれば投稿のおすすめ画像）に置き換える方法はありますか。クリックしたときにサムネイルをビデオインラインフレームに置き換えますか？

thumbnailsyoutubeoembed
5
Richard

ノート

  • YouTubeとVimeoのためのソリューション。
  • ビデオプロバイダーからのおすすめ画像またはデフォルトのサムネイルを使用します。
  • 同じページに複数のoEmbedが存在する場合、Featured Imageを使用すると重複した「サム」が表示されます。
  • 変更が反映される前に投稿を更新する必要があります。
  • <iframe>と<img>のサイズ、その他のoEmbeds.

インスピレーションの源

乗った

サムネイル、サムネイル、ワードプレス

画像を埋め込みに置き換える

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

プラグイン

<?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;
}

ビデオプロバイダーから返された$dataの内容

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
)
5
brasofilo

これが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);

埋め込みキャッシュを消去することを忘れないでください。 これを行うには、このSQLコマンドを使用できます。

DELETE FROM wp_postmeta WHERE meta_key LIKE '_oembed%'

https://siteorigin.com/clearing-oembed-cache/ /で詳細情報

1
pravdomil

これは良い方法ですが...（それほど経験の浅い私たちにとって）あまり関係のない方法は このチュートリアル を使用することです。

YouTubeの埋め込みコードをYT（YouTube）が提供するので、プラグインしないでください（試してみてくださいが、派手になります）...代わりに、vidの埋め込みコードのソースを&amp;autoplay=1に置き換えてください（残す）そのまま最後にこれ）。

例えば。

元のコードYTは以下を与えます：

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

チュートリアルで同じ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>

それ以外は、imgソースとパスを独自のものに置き換えてください。

0
user41133