web-dev-qa-db-ja.com

動画のショートコードにレスポンシブ埋め込み

私は.embed-responsiveクラスに埋め込まれたビデオをラップしてCSSで反応するようにするカスタムコードを推進しました。

PHP：

function kadabra_responsive_embed( $html ) {
    return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'kadabra_responsive_embed', 10, 3 );
add_filter( 'video_embed_html', 'kadabra_responsive_embed' );

CSS：

.embed-responsive-16by9 {
  height: 0;
  padding-bottom: 56.25%;
}

これはビデオの埋め込みに最適です。ただし、Twitterの埋め込みのように、必須ではない他の埋め込みもラップされます。ビデオ埋め込み専用にする方法はありますか？

theme-developmentshortcodeembedoembed
1
Deka87

embed_oembed_htmlフィルタ用の新しいコールバックを作成し、3番目の入力引数であるoembed $urlをターゲットにすることができます。

それならcreatebooleanヘルパー関数は（未テスト）です。

function is_oembed_from_video_specific_hosts_wpse274552( $url )
{
    return in_array(
        parse_url( $url, PHP_URL_Host ),
        [
             'youtube.com',
             'youtu.be',
             'vimeo.com',  // ... etc
        ],
        true
    );
}

または（テストされていない）ようなより詳細な（より高価な）チェック：

function is_video_oembed_wpse274552( $url )
{
    $video_providers = [
        '#https?://((m|www)\.)?youtube\.com/watch.*#i',
        '#https?://((m|www)\.)?youtube\.com/playlist.*#i',         
        '#https?://youtu\.be/.*#i',        
        '#https?://(.+\.)?vimeo\.com/.*#i',                        
        '#https?://(www\.)?dailymotion\.com/.*#i',                 
        '#https?://dai\.ly/.*#i',
        '#https?://videopress\.com/v/.*#',
        '#https?://wordpress\.tv/.*#i',
        '#https?://(www\.)?funnyordie\.com/videos/.*#i',
        '#https?://(www\.)?(animoto|video214)\.com/play/.*#i',
        '#https?://www\.facebook\.com/.*/videos/.*#i',
        '#https?://www\.facebook\.com/video\.php.*#i', // ... etc
    ];

    $is_video_oembed = false;
    foreach( $video_providers as $video_provider )
    {
        if ( preg_match( $video_provider , $url ) ) {
        {
             $is_video_oembed = true;
             break;
        }
    }
    return $is_video_oembed;
}

OEmbedプロバイダは、WordPressコア内およびフィルタを通じて変更、追加、削除できることに注意してください。それは上記のチェックに影響を与える可能性があります。

あなたのニーズに合わせて調整できることを願っています！

1
birgire