WordPress video标签自适应方案

WordPress video标签是插入视频时,自动加载了播放器而生成的标签,这个标签会根据 content_width 设置的宽度而生成视频宽度。

content_width并不友好,设置宽度后,如果太小,那么桌面访问视频也是设置的宽度,当然太小。反之设置太大的话,移动端就太小了。

/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function info_content_width() {
	// This variable is intended to be overruled from themes.
	// Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}.
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
    if( wp_is_mobile() ) {
        $GLOBALS['content_width'] = apply_filters( 'info_content_width', 280 );
    } else {
        $GLOBALS['content_width'] = apply_filters( 'info_content_width', 640 );
    }
}
add_action( 'after_setup_theme', 'info_content_width', 0 );

上诉方案是用了移动端 280px 宽度,其他终端显示 640px 宽度。同时,我们还需要把视频进行居中放置,需要增加css:

.wp-video{
    margin-left: auto;
    margin-right: auto;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注