0

我无法从 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%。

我究竟做错了什么？

屏幕截图 ->屏幕截图

这是上述示例 - 尝试调整浏览器大小

4

4 回答 4

8

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

video{ width: 100%; height: 100%; max-width: 100%; }
.wp-video{width: 100% !important;}
于 2014-02-21T13:16:47.027 回答
0

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

于 2013-11-06T19:16:27.020 回答
0

当 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]。在查看您的示例时，如果您缩小页面，我们可以看到您的响应式视频确实有效。但是，问题是当站点完全展开时它不会扩展到超过 640 像素。

因此，我认为您只需要确保扩展站点上视频的原始输出足够大以填充您的响应式包装 div。这行得通吗？

注意：我选择了 1030，因为这是您链接到的示例中内容区域的大小。

于 2013-11-06T21:07:28.253 回答
0

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

width="1140"

代替

width=100%

根据视频简码上的法典页面。

于 2013-11-14T16:00:48.907 回答