[重要说明:这仅影响自托管 <video>标签，而不是 youtube 或 vimeo iframe]
因此，我在页面中嵌入了具有垂直比例(纵向)(通常为 720 像素宽度和 1280 像素高度)的手机视频。
一切正常，除了视频不会适应页面。宽度将适合，但用户需要在视频播放时上下滚动以欣赏显示的内容。
我已经尝试了所有 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]
视频变小了，但还是不会适配页面。
我想我已经明白为什么...？如果我偏离了轨道，请告诉我:
整个前提如何<video>嵌入 Wordpress 的大小，似乎是基于 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(假设您的视频显然是 720 像素 x 1280 像素(= 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 是我能想到的第一个既响应又可通过 HTTPS 访问的 URL(JSFiddle 必须具有 HTTPS)(这是我建立的一个名为“十月”的网站)。
<div与类 container只是一个例子 - 它可以是任何你想要的具有适当宽度的东西，可以将你的肖像嵌入其中 - 并且可以是你的 <body>标记，或您网页的任何部分。
如果您需要不同的纵横比，只需更改(或创建一个新的 CSS 类).embed-responsive-9by16 的填充底部CSS 类。您可以计算出所需的百分比:
height / width * 100 (在您的情况下:1280 / 720 * 100 = 177.78%)。
如何在 WordPress 中获得它是另一回事 - 并且在很大程度上取决于您的设置。您可以编辑 CSS 文件以添加这些 CSS 类；在您的页面中获取 HTML 可能是另一回事，因为 WordPress 有时会“重写”您粘贴到 HTML View 中的 HTML 并删除您想要的内容。但是 JSFiddle 证明您可以实现响应式肖像嵌入。
尽管如此，我认为您不需要对 PHP 变量 $content_width 做任何事情。 .
关于css - 是否可以在 Wordpress 中使 *portrait* <video> 标签响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34967159/