你管视频看起来不同的维度

时间:2014-12-27 作者:Relax

我创建了名为“视频”的自定义帖子类型,为了发布YouTube视频,我在WordPress编辑器中粘贴了YouTube视频的URL

对于Ex:“https://www.youtube.com/watch?v=COviggz8j50“”

但每个YouTube视频显示的维度不同

我想以700 x 350像素的尺寸显示我的视频

这里我给出前两个视频的维度

第一个视频尺寸宽度:500,高度:280

第二个视频尺寸宽度:500高度:375

注意:我想使用You tube视频URL发布视频,不想使用嵌入代码<iframe></iframe> 来自YouTube视频

在我的页面视频中。php

<div class="main container">
    <div class="content left">

        <?php
        $paged = (get_query_var(\'paged\')) ? get_query_var(\'paged\') : 1;
            $type = \'videos\';
            $args=array(
              \'post_type\' => $type,
              \'post_status\' => \'publish\',
              \'posts_per_page\' => 5,
              \'paged\'=>$paged
            );

            $wp_query = null;
            $wp_query = new WP_Query($args);

            if ( $wp_query->have_posts()) :

            while ( $wp_query->have_posts()) :  $wp_query->the_post(); ?>

            <article class="post">              
                <?php the_content(); ?> 
                <div class="clear"></div>
            </article>      
            <?php endwhile;
                    my_simone_paging_nav(); 
            else :
                echo "<p>No content found</p>";
            endif;
            wp_reset_query();  // Restore global post data stomped by the_post().
            ?>          
    </div><!-- End content -->
    <?php get_sidebar(); ?>
</div><!-- End main-content -->

1 个回复
最合适的回答,由SO网友:cybmeta 整理而成

每个视频可以有不同的aspet比率,这是完全正常的。通常,主题设置为global $contnt_width 设置嵌入内容的最大宽度,高度为自动。例如:

if ( ! isset( $content_width ) ) {
    $content_width = 700;
}
如果需要为嵌入内容设置特定的宽度和高度,可以尝试oembed_defaults filter:

add_filter(\'embed_defaults\',\'cyb_embed_defaults\');
function cyb_embed_defaults($defaults) {
    $defaults[\'width\']=700;
    $defaults[\'height\']=500;
    return $defaults;
}
或者使用一些CSS技术。对于exmaple,将youtube嵌入iframe包装在自定义div中:

add_filter(\'embed_oembed_html\', \'cyb_oembed_html\' );
function cyb_oembed_html( $output ) {

    //check that the embed content is from youtube
    if( strpos( $output, \'youtube\' ) ) {
        return \'<div class="video-container">\' . $output . \'</div>\';
    }

    return $output;

}
然后将CSS应用于video-container div.例如,这一款使youtube iframe响应迅速,纵横比为16:9:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
在中查找更多CSS技术和jQuery示例this demo from CSS-Tricks.

旁白:正如我在其他问题中向您建议的那样,您应该考虑使用内置模板文件进行自定义帖子类型归档,而不是使用页面模板进行此类归档。您将保存一些额外的查询和额外的工作。

结束

相关推荐

来自YouTube的缩略图(函数和循环)

嗨:D我需要在主页上显示youtube上的缩略图,我有一个wordpress函数和循环的代码,但不能从youtube上显示缩略图。代码可能有什么问题?功能代码: function get_thumbnail_fromyoutube( $size = 0 ) { global $post, $posts; $youtube = \'\'; $get_url = preg_match_all(\'/<iframe.+src=[\\\'\"](