Question

我无法让Wordpress核心的视频响应。

我正在使用以下CSS：

.videocontent {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  margin: 0 auto;
} 

.wp-video-shortcode {
  max-width: 100%;
}

以下使用短代码的HTML不会缩放到包含div的完整大小：

<div class="videocontent">
    <?php
    echo do_shortcode('[video webm="http://localhost/dnp/stalker.webm" width=100%]');
    ?>
</div>

但直接使用HTML可以正常工作：

<div class="videocontent">
    <video  id="myvideo2" style="width:90%;height:100%;" controls="controls">
      <source src="http://localhost/dnp/stalker.webm" type="video/webm"/>
    </video>
</div>

我尝试使用短代码进行各种设置 - 例如高度100％，高度和宽度100％以及宽度100％。

我做错了什么？

截图 - ＆gt; screen shot

这是an example of the above - try resizing browser

Answer 1

使用以下css进行WordPress视频短代码输出

video{ width: 100%; height: 100%; max-width: 100%; }
.wp-video{width: 100% !important;}

Answer 2

我一直在研究一个主题，发现当我在样式表中设置视频的最大宽度时，嵌入WP的视频对浏览器宽度的变化没有反应。

Answer 3

当WordPress输出[video]短代码时，它将视频包装在DIV中：

<div style="width:640px;height:100px">
   video here ...
</div>

您传入[video]短代码的宽度不能是百分比。因此，您需要设置格式为1030的宽度。

<div class="videocontent">
    <?php echo do_shortcode('[video webm="..." width="1030"]'); ?>
</div>

目前，您正在使用DIV并将其设置为响应式，但您将外部放在WordPress的[video]短代码输出中。在查看您的示例时，如果您缩小页面，我们可以看到您的自适应视频确实正常工作。但问题是，当站点完全展开时，它不会扩展到640px以上。

所以，我认为你只需要确保扩展网站上视频的原始输出足够大，以填充你的响应包装div。这有用吗？

注意：我选择了1030，因为您所链接的示例中的内容区域有多大。

Answer 4

您的宽度参数应为整数而不是百分比：

width="1140"

而不是

width=100%

根据video shortcode上的codex页面。

Wordpress核心响应视频无法使用短代码

4 个答案: