[重要说明:这只会影响自托管的<video>
标签,而不会影响youtube或vimeo iframe。
因此,我将页面视频嵌入到具有垂直比率(人像)(通常为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中
<video>
的大小的整个前提似乎是基于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的纵向(视频)嵌入(假设您的视频显然为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,它既可响应,又可通过HTTPS获得(必须与JSFiddle一起使用HTTPS)(这是我建立的网站,名为“十月” '))。
类别为
<div
的container
只是一个示例-它可以是您想要的具有适当宽度的任何内容,以将您的肖像嵌入其中-可以是您的<body>
标记或网页的任何部分。如果您需要其他宽高比,只需更改
.embed-responsive-9by16
CSS类的padding-bottom(或为其创建新的CSS类)。您可以将所需百分比计算为:height / width * 100
(在您的情况下为:1280 / 720 * 100 = 177.78%
)。如何在WordPress中获得此信息又是另一回事-很大程度上取决于您的设置。您可以编辑CSS文件以添加这些CSS类。在页面中获取HTML可能是另一回事,因为WordPress有时会“重写”粘贴在HTML视图中的HTML,并去除所需的内容。但是JSFiddle证明您可以实现响应式肖像嵌入。
FWIW不过,我认为您不需要对PHP变量
$content_width
做任何事情。