在一个页面上修改YouTube视频大小,在不同页面上显示另一个大小

时间:2014-06-18 作者:renathy

我必须在我的第一页上显示三个视频(自定义帖子类型)。单击链接时,将显示帖子,视频应为默认宽度。

您能否帮助了解如何更改视频的宽度(如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; ?>

3 个回复
最合适的回答,由SO网友:Nicolai Grossherr 整理而成

我假设你正在使用WordPress\'Embeds 特色一般来说wp_embed_defaults() 为您提供所需的信息。看看source 披露您的可能性:

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\'] - 是确定默认宽度的第一种方法,如果它不是空的,将使用它。主题功能Content Width 可以通过将以下内容添加到functions.php:

if ( ! isset( $content_width ) ) {
    $content_width = 1200;
}
设置所需的宽度。如果不这样做,则宽度默认为500px,如上所示。高度默认为宽度的1.5倍,如果小于,则默认为1000px。

指定的宽度是最大值,因此embed 不会比那更宽,但会缩小尺寸。您可以通过CSS使用以下参数支持此行为:

max-width: 100%;
height: auto;
这通常是一个建议,但不一定需要。

上述内容通常足以将嵌入内容缩放到其所在容器的大小。

但是,查看源显示了修改宽度(和高度)值的另一种方法。这将是hooking 进入embed_defaults 滤器有关此功能的更多一般信息,请访问WordPress codex页面Plugin API, 这是进一步了解该主题的良好开端。关于如何将这种可能性应用于embed_defaults 筛选器如下所示:

add_filter( \'embed_defaults\', \'wpse150029_change_embed_defaults\' );
function wpse150029_change_embed_defaults() {
    return array(
        \'width\'  => 1200, 
        \'height\' => 800
    );
}
代码将是您的functions.php 或插件。理论上你可以使用conditional tags 区分这些值,但不太可能需要。

这应该包括设置嵌入内容宽度的可能性。其余取决于您的templates 以及你正在使用的主题的CSS。

因为你的目标是展示the_excerpt() 以及主页、首页或概览页上的视频,您必须创建自己的功能,从帖子内容中提取视频URL并使用wp_oembed_get() 获取嵌入的HTML。例如:

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

如果你真的想为你的嵌入式视频制作缩略图,你应该看看这些问题和建议;A在这里:

SO网友:crissoca

我认为一个更好的选择是使用CSS重新调整视频大小,假设您有容器.video_index 用于视频索引和.video_single 对于单个视频条目,下面是一个示例。

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

SO网友:Hendrik Luehrsen

是的,有(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\\u THEME\\URL就是它所声称的主题的URL。16x9占位符。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%;
    }
}
因此,它始终通过保持16x9的纵横比将嵌入式视频缩放到容器的100%。这样你就可以在任何你想要的地方放下oembed。

我知道有很多方法可以删除图像(在.oembed包装器上使用伪选择器)以保持纵横比,但我从来没有读过这些方法。这在99%的情况下有效。

结束

相关推荐

如何让我的新主题变成[YouTube id=“id of the Video here”Width=“600”Height=“350”]?

我最近在我的网站上更改了主题,现在我的所有视频都以这种格式出现在帖子上:[youtube id=“此处仅id”width=“600”height=“350”]都不懂,里面的帖子都喜欢this one.以下消息显示了视频的位置:Please enter the url to a YouTube video. 我怎样才能做到这样,我就不需要进入我所有的帖子,里面有任何视频,并以WordPress将其嵌入的方式进行编辑?