[重要提示：这仅影响自托管
<video>因此，我以垂直比例（纵向）（通常为 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]
视频变小了，但还是不适应页面。
我想我已经明白为什么......？告诉我我是否偏离了轨道：
WordPress 中
<video>width$content_width$content_height具体来说，这是在
wp_video_shortcodeglobal $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 是我能想到的第一个既响应式又可通过 HTTPS 访问的 URL（JSFiddle 必须具有 HTTPS） （这是我建立的一个名为“十个月亮”的网站））。
带有
<divcontainer<body>如果您需要不同的宽高比，只需更改（或为其创建新的 CSS 类）
.embed-responsive-9by16height / width * 1001280 / 720 * 100 = 177.78%如何在 WordPress 中获得此功能则是另一回事 - 并且很大程度上取决于您的设置。您可以编辑 CSS 文件来添加这些 CSS 类；在页面中获取 HTML 可能是另一回事，因为 WordPress 有时会“重写”您粘贴到 HTML 视图中的 HTML 并删除您想要的内容。但 JSFiddle 证明您可以实现响应式肖像嵌入。
FWIW 不过，我认为您不需要对 PHP 变量做任何事情
$content_width为什么不使用 iframe？下面的代码不需要任何 CSS 文件编辑。
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe type="video/mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/BXFLBj5y2A0" frameborder="5px" allowfullscreen="allowfullscreen">
</div>
根据您的用户角色，WordPress 可能会在您保存 iframe 代码时删除它。例如，如果您是作者，就会发生这种情况。看看您是否可以更改为编辑角色
我有一种不同的方法，非常简单，留在这里以防万一：
<div class="image-cover" style="background-image: url('YOUR_PORTAIT_IMG'); ">
<video controls class="d-block w-100" poster="TRANSPARENT_1px.png">
<source src="YOUR_VIDEO_SRC" type="video/mp4">
</video>
</div>
.image-cover 类在哪里：
.image-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll; }
“d-block”类是 display:block; “w-100”是宽度：100%； （引导程序）
这样，无论视频大小如何，由于肖像什么都没有（透明png），观看者可见的图像将填充整个区域（覆盖）。
我设法通过JS动态计算视频的宽度，因此比例始终相同：
<div class="video-container">
<iframe
width="315"
height="560"
src="<your-url-here>"
></iframe>
</div>
.video-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid red;
height: 85%;
}
iframe {
height: 100%;
width: 100%;
}
function setWidth() {
const vc = document.querySelector('.video-container');
vc.style.width = `${vc.offsetHeight * 0.5625}px`;
}
setWidth();
window.addEventListener("resize", setWidth);
您还可以在此处检查笔：https://codepen.io/rotolog/pen/QWzaNqX?editors=1010