[重要说明:这只会影响自托管的<video>标签,而不会影响youtube或vimeo iframe。

因此,我将页面视频嵌入到具有垂直比率(人像)(通常为720px宽度和1280px高度)的视频中。

一切正常,除了视频将无法适应该页面。宽度合适,但是在播放视频时用户需要上下滚动才能欣赏显示的内容。

我已经尝试了所有CSS技巧,以使视频div响应,但是它不起作用。

视频被包装到div中,其内容如下:

.wp-video-shortcode, video, .mejs-mediaelement {
    max-width: 100% !important;
    max-height:100% !important;
}


但没有任何效果(仅宽度会随着页面尺寸的改变而改变!)。

如果我手动更改了简码的宽度和高度,则:

[video width="720" height="1280" mp4="http://url.mp4" autoplay="true" poster="http://url.jpg"][/video]


变得

[video width="340" height="680" mp4="http://url.mp4" autoplay="true" poster="http://url.jpg"][/video]


视频变小,但仍无法适应页面。

我想我已经明白了为什么...?告诉我我是否偏离轨道:

嵌入Wordpress中<video>的大小的整个前提似乎是基于width的:为此甚至有一个名为$content_width的全局变量,而没有$content_height

具体来说,这是在wp_video_shortcode函数中发生的情况:

global $content_width;

// if the video is bigger than the theme
        if ( ! empty( $content_width ) && $atts['width'] > $content_width ) {
            $atts['height'] = round( ( $atts['height'] * $content_width ) / $atts['width'] );
            $atts['width'] = $content_width;
        }


如您在上方所见,wp似乎仅根据页面宽度检查视频。

如何解决呢?

最佳答案

我认为简短的答案是WordPress无法将响应肖像(视频)嵌入“开箱即用”。

但是,您可以通过一些自定义编码来实现WordPress中想要的功能。以下内容是从Twitter Bootstrap框架改编而成的,尤其是此处记录的内容:http://getbootstrap.com/components/#responsive-embed

我所做的更改是,它适用于纵横比为9:16的纵向(视频)嵌入(假设您的视频显然为720px x 1280px(= 9:16纵横比))。

HTML:

<div class="container">
  <div class="embed-responsive embed-responsive-9by16">
    <iframe class="embed-responsive-item" src="[URL to your video]"></iframe>
  </div>
</div>


CSS:

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-9by16 {
    padding-bottom: 177.78%;
}

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


JSFiddle示例:https://jsfiddle.net/c4akmfxd/(此示例中iframe的URL是我可以想到的第一个URL,它既可响应,又可通过HTTPS获得(必须与JSFiddle一起使用HTTPS)(这是我建立的网站,名为“十月” '))。

类别为<divcontainer只是一个示例-它可以是您想要的具有适当宽度的任何内容,以将您的肖像嵌入其中-可以是您的<body>标记或网页的任何部分。

如果您需要其他宽高比,只需更改.embed-responsive-9by16 CSS类的padding-bottom(或为其创建新的CSS类)。您可以将所需百分比计算为:
height / width * 100(在您的情况下为:1280 / 720 * 100 = 177.78%)。

如何在WordPress中获得此信息又是另一回事-很大程度上取决于您的设置。您可以编辑CSS文件以添加这些CSS类。在页面中获取HTML可能是另一回事,因为WordPress有时会“重写”粘贴在HTML视图中的HTML,并去除所需的内容。但是JSFiddle证明您可以实现响应式肖像嵌入。

FWIW不过,我认为您不需要对PHP变量$content_width做任何事情。

10-05 20:42
查看更多