Css 是否可以制作一张*肖像*<；视频>；Wordpress中的标签响应？

[重要提示：这只影响自托管的

标记，而不影响youtube或vimeo iframes]

因此，我在页面中嵌入了垂直比为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中嵌入的

大小的整个前提似乎是基于

宽度的：为此，甚至有一个名为
$content\u width
的全局变量，而没有
$content\u height

具体来说，这就是
wp\u video\u 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引导框架，特别是此处所述：

我所做的更改是，它适用于面向肖像的（视频）嵌入，宽高比为9:16（假设您的视频明显为720px 1280px（=9:16宽高比））

HTML:

JSFiddle示例：（本例中iframe的URL是我想到的第一个既响应又可通过HTTPS访问的URL（使用JSFiddle时需要HTTPS）（这是我创建的一个名为“十个月亮”的网站）

为什么不使用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>

类“d-block”显示为：block；“w-100”为宽度：100%；（引导）

这样，无论视频大小如何，由于人像什么都不是（透明png），因此观众可以看到的图像将填满整个区域（封面）

<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>

<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 {
-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; }