web-dev-qa-db-ja.com

あるページのYouTubeビデオのサイズを変更し、別のページに別のサイズを表示する

最初のページに3つの動画（カスタム投稿タイプ）を表示する必要があります。リンクをクリックすると、投稿が表示され、ビデオはデフォルトの幅になります。

あなたは（YouTubeのように）ビデオの幅を変更する方法を見つけるのを助けることができますか？

これは私が今情報を表示する方法であり、これはすべてのコンテンツ（ビデオを含む）を表示します。どういうわけかthe_excerpt +小さいビデオだけを見せる必要があります。

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <li>
        <?php the_title(
            '<h2 class="entry-title">
                <a href="' . get_permalink() . '"
                title="' . the_title_attribute( 'echo=0' ) . '"
                rel="bookmark">',
            '</a></h2>' );
        ?>          
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </li>
<?php endwhile; ?>
excerptembedyoutubeoembed
4
renathy

WordPressの 埋め込み 機能を使用していると思います。一般的に wp_embed_defaults() は必要な情報を提供します。 ソース を見ると、可能性がわかります。

2017    /**
2018     * Create default array of embed parameters.
2019     *
2020     * The width defaults to the content width as specified by the theme. If the
2021     * theme does not specify a content width, then 500px is used.
2022     *
2023     * The default height is 1.5 times the width, or 1000px, whichever is smaller.
2024     *
2025     * The 'embed_defaults' filter can be used to adjust either of these values.
2026     *
2027     * @since 2.9.0
2028     *
2029     * @return array Default embed parameters.
2030     */
2031    function wp_embed_defaults() {
2032            if ( ! empty( $GLOBALS['content_width'] ) )
2033                    $width = (int) $GLOBALS['content_width'];
2034    
2035            if ( empty( $width ) )
2036                    $width = 500;
2037    
2038            $height = min( ceil( $width * 1.5 ), 1000 );
2039    
2040            /**
2041             * Filter the default array of embed dimensions.
2042             *
2043             * @since 2.9.0
2044             *
2045             * @param int $width  Width of the embed in pixels.
2046             * @param int $height Height of the embed in pixels.
2047             */
2048            return apply_filters( 'embed_defaults', compact( 'width', 'height' ) );
2049    }

ご覧のとおり、global変数$content_width - $GLOBALS['content_width'] - がデフォルトの幅を決定する最初の方法です。空でない場合はそれが使用されます。テーマ機能 コンテンツ幅 は、functions.phpに以下を追加することで使用できます。

if ( ! isset( $content_width ) ) {
    $content_width = 1200;
}

これはあなたが必要とする幅を設定します。あなたがそうしないなら、あなたが上で見ることができるように、幅はデフォルトで500pxになります。高さのデフォルトは幅の1.5倍、またはそれより小さい場合は1000ピクセルです。

指定された幅は最大であるため、あなたの 埋め込み はそれより広くはなりませんが、サイズは縮小されます。次のパラメータを使用して、CSSを介してこの動作をサポートできます。

max-width: 100%;
height: auto;

これは一般的な推奨事項ですが、必ずしも必要ではありません。

上記は通常あなたの埋め込みコンテンツをそれらが入っているコンテナのサイズに合わせるのに十分なはずです。

ただし、ソースを調べてみると、幅（および高さ）の値を変更する別の方法がわかります。これは が をembed_defaultsフィルタにフックすることによって行われます。この機能に関するより一般的な情報はWordPressコーデックスページ プラグインAPI で見つけることができます。この可能性をembed_defaultsフィルタに適用する方法の具体例は、次のようになります。

add_filter( 'embed_defaults', 'wpse150029_change_embed_defaults' );
function wpse150029_change_embed_defaults() {
    return array(
        'width'  => 1200, 
        'height' => 800
    );
}

コードはあなたのfunctions.phpまたはプラグインの一部になります。理論的には、値を区別するために 条件付きタグ を使用できますが、必要とされることはまずありません。

これは埋め込みコンテンツの幅を設定する可能性をカバーするはずです。残りはあなたの テンプレート とあなたが使っているテーマのCSSに依存します。

あなたの目標は the_excerpt() とあなたの家、正面または概要ページにビデオを表示することですからあなたはそこからビデオURLを抽出するためにあなた自身の関数を作らなければなりません投稿内容と埋め込みHTMLを取得するために wp_oembed_get() を使います。例えばこんな感じ：

function wpse150029_fetch_youtube_return_embed_html( $content ) {
    // Regex example+explanation can be found here: http://regex101.com/r/vZ6bX6/3
    // note: the first youtube link will be extracted
    $pattern  = '/(?<=(?:\[embed\])|(?:\[embed\]\s)|(?:))';
    $pattern .= '(https?:\/\/)';
    $pattern .= '(:?www\.)?';
    $pattern .= '(:?youtube\.com\/watch|youtu\.be\/)';
    $pattern .= '([\w\?\=\&(amp;)]+)';
    $pattern .= '(?=(?:\[\/embed\])|(?:\s\[\/embed\])|(?:))';
    $pattern .= '/ims';
    preg_match( $pattern, $content, $matches );
    $url = $matches[0];
    $embed_code = wp_oembed_get( $url );
    return $embed_code;
}

上記のコードはあなたのfunctions.phpに入ります。以下に示すようなテンプレートの使用例

$video_loop = new WP_Query( $args );
if ( $video_loop->have_post() ) :
    while ( $video_loop->have_posts() ) : $video_loop->the_post();
        the_title();         
        the_excerpt();
        echo wpse150029_fetch_youtube_return_embed_html( $post->post_content );
    endwhile;
    wp_reset_postdata();
else :
endif;

これに関する詳細な説明は WP_Query のドキュメントを見てください。

埋め込みビデオのサムネイルを実際に見たい場合は、こちらのQ&Aをご覧ください。

7
Nicolai

動画のインデックス用にコンテナ.video_indexを、単一の動画エントリ用に.video_singleを持っていると仮定すると、もっと良い選択肢はCSSで動画のサイズを変更することだと思います。ここに例があります。

.video_index iframe{ width: 250px; height: 170px; } .video_single iframe{ width: 500px; height: 360px; }

3
crissoca

ええ、（O）の埋め込みとコンテンツの幅を持つ古い話。感想があるとすぐに、システム全体が崩壊します。解決策は、私たちのテーマの中で私たちがしていることです。

/**
 * Change the embed code, so we can apply awesome css shit
 * Called by filter "oembed_result"
 *
 * @author Hendrik Luehrsen
 * @since 1.0
 *
 * @param $html string The oembed html to edit
 *
 * @return string The edited html
 */
function change_oembed($html, $url, $args){
    $video_pattern = "#(\W|^)(youtube|vimeo)(\W|$)#";

    if(preg_match($video_pattern, $url)){
        $new_html = '<div class="clearfix"></div><div class="oembed-wrapper"><img src="'.WP_THEME_URL.'/img/16x9_placeholder.png" />'.$html.'</div>';
    } else {
        $new_html = $html;
    }

    return $new_html;
}
add_filter( 'oembed_result', array($this, 'change_oembed'), 999, 3 );

ちょっとした説明：定数WP_THEME_URLはそれが主張するもの、テーマへのURLです。 16x9 placeholder.pngは、16 x 9ピクセルの透明PNGです。残りはCSS/LESSで行われます。

.oembed-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    margin: 30px 0;

    img {
        width: 100%;
        height: auto;
        margin: 0 !important;
    }

    iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
}

そのため、16×9の縦横比を維持することで、埋め込みビデオを常にコンテナの100％に調整します。そのようにしてあなたはいつでもあなたが望むところにoembedを落とすことができます。

アスペクト比を維持するために（.oembed-wrapper上の疑似セレクターを使って）画像をドロップする方法があることを私は知っていますが、私はそれらを読んだことはありません。これはケースの99％ではたらきます。

3
Hendrik Luehrsen