srcmini[重要说明：这只会影响自托管的<video>标签, 而不影响youtube或vimeo iframe。
因此, 我将页面视频嵌入到具有垂直比率(纵向)(通常为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="[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, 该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="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), 因此观看者可以看到的图像将覆盖整个区域(封面)。
评论前必须登录！
注册