在Wordpress中可以让一个“portrait”< video>标签响应吗？

zz2j4svz 于 2023-10-17 发布在 WordPress

关注(0)|答案(4)|浏览(131)

[重要提示：这只影响自托管的<video>标签，而不是youtube或vimeo iframes]
所以我在页面中嵌入了垂直比例（纵向）的手机视频（通常为720 px宽和1280 px高）。
一切正常，除了视频不会适应页面。宽度将适合，但用户需要上下滚动，而视频播放欣赏正在显示的内容。
我已经尝试了所有的CSS技巧，使视频div响应，但它不会工作。
这些视频被 Package 到一个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

来源：https://stackoverflow.com/questions/34967159/is-it-possible-to-make-a-portrait-video-tag-responsive-in-wordpress

4条答案

按热度按时间

jhkqcmku1#

我认为简短的答案是WordPress不能做响应式肖像（视频）嵌入“开箱即用”。
但是，您可以通过一些自定义编码在WordPress中实现您想要的内容。以下内容改编自Twitter Bootstrap框架，特别是这里的文档：http://getbootstrap.com/components/#responsive-embed
我所做的更改是为了使它适用于面向纵向（视频）嵌入，宽高比为9：16（考虑到您的视频显然是720 px x 1280 px（= 9：16宽高比））。
超文本标记语言：

<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（必须有HTTPS和JSFiddle）（这是我建立的一个名为“十个月”的网站））。
带有类container的<div只是一个例子-它可以是任何你想要的，有适当的宽度来嵌入你的肖像-可以是你的<body>标签，或者你网页的任何部分。
如果您需要不同的长宽比，只需更改.embed-responsive-9by16 CSS类的padding-bottom（或为其创建新的CSS类）。你可以计算出所需的百分比：height / width * 100（在您的案例中：1280 / 720 * 100 = 177.78%）。
如何在WordPress中实现这一点是另一回事-很大程度上取决于您的设置。您可以编辑CSS文件来添加这些CSS类;获取页面中的HTML可能是另一回事，因为WordPress有时会“重写”你粘贴在HTML视图中的HTML，并去掉你想要的东西。但是JSFiddle证明了你可以实现一个响应式的肖像嵌入。
不过，我认为你不需要对PHP变量$content_width做任何事情。

赞(0）回复(0）举报 2023-10-17

jyztefdp2#

为什么不使用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代码时删除它。如果你是一个作家，就会发生这种情况。查看是否可以更改为编辑角色

赞(0）回复(0）举报 2023-10-17

fkvaft9z3#

我有一个不同的方法，非常简单的一个，离开这里以防万一：

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

其中class .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%;（bootstrap）
这样，无论视频大小如何，由于肖像什么都不是（透明的png），因此观众可见的图像将填充整个区域（封面）。

赞(0）回复(0）举报 2023-10-17

8yoxcaq74#

我设法通过JS动态计算视频的宽度，所以比例总是相同的：

function setWidth() {
  const vc = document.querySelector('.video-container');
  vc.style.width = `${vc.offsetHeight * 0.5625}px`;
}

setWidth();

window.addEventListener("resize", setWidth);

.video-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid red;
  height: 85%;
}

iframe {
  height: 100%;
  width: 100%;
}

<div class="video-container">
    <iframe 
        width="315" 
        height="560" 
        src="<your-url-here>"
    ></iframe>
</div>

你也可以在这里检查笔：https://codepen.io/rotolog/pen/QWzaNqX?editors=1010

赞(0）回复(0）举报 2023-10-17

我来回答

在Wordpress中可以让一个“portrait”< video>标签响应吗？

4条答案

相关问题

热门标签

最新问答