是否可以在WordPress中响应*纵向*video标签（） _WordPress开发

[重要说明：这只会影响自托管的< video> 标签, 而不影响youtube或vimeo iframe。
【是否可以在WordPress中响应*纵向*video标签（）】因此, 我将页面视频嵌入到具有垂直比率(纵向)(通常为720px宽度和1280px高度)的手机中。
一切正常, 除了视频无法适应该页面。宽度合适, 但是在播放视频时, 用户需要上下滚动才能欣赏显示的内容。
我已经尝试了所有CSS技巧, 以使视频div响应, 但是它不起作用。
视频被包装到div中, 其内容如下：

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

但没有任何效果(仅宽度会随着页面尺寸的改变而改变！)。
如果我手动更改了简码中的宽度和高度, 如下所示：

变得

视频变小, 但仍无法适应页面。
我想我已经明白了为什么… ？告诉我我是否偏离轨道：
嵌入Wordpress中< video> 的大小的整个前提似乎是基于宽度的：为此, 甚至有一个名为$ 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似乎仅根据页面的宽度检查视频。
如何解决呢？
#1我认为简短的答案是WordPress无法将响应肖像(视频)嵌入” 开箱即用” 。
但是, 你可以通过一些自定义编码来实现WordPress中想要的功能。以下内容是从Twitter Bootstrap框架改编而成的, 尤其是此处记录的内容：http://getbootstrap.com/components/#sensitive-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="http://img.readke.com/220527/13525J432-0.jpg 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, 该URL既可响应, 又可通过HTTPS使用(必须与JSFiddle一起使用HTTPS)(这是一个我建立的网站叫做” 十个月亮” )。
< 带有类容器的< div> 只是一个例子-它可以是你想要的任何具有适当宽度的东西, 可以将你的肖像嵌入其中-可以是你的< body> 标记或网页的任何部分。
如果需要不同的宽高比, 只需更改.embed-sensitive-9by16 CSS类的填充底部(或为其创建新的CSS类)。你可以算出所需的百分比：高度/宽度* 100(在你的情况下：1280/720 * 100 = 177.78％)。
如何在WordPress中获得此信息又是另一回事-很大程度上取决于你的设置。你可以编辑CSS文件以添加这些CSS类。在页面中获取HTML可能是另一回事, 因为WordPress有时会” 重写” 粘贴在HTML视图中的HTML, 并去除所需的内容。但是JSFiddle证明你可以实现响应式肖像嵌入。
FWIW不过, 我认为你不需要对PHP变量$ content_width进行任何操作。
#2为什么不使用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代码。例如, 如果你是作者, 就会发生这种情况。查看是否可以更改为编辑者角色
#3我有一种不同的方法, 非常简单, 请留在这里以防万一：

< div class="image-cover" style="background-image: url('YOUR_PORTAIT_IMG'); "> < video controls class="d-block w-100" poster="TRANSPARENT_1px.png"> < source src="http://www.srcmini.com/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), 因此观看者可以看到的图像将覆盖整个区域(封面)。