WordPress的核心响应视频不工作与简码

k2fxgqgv 于 5个月前发布在 WordPress

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

我无法从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%。
我做错了什么？
屏幕截图-> screen shot
这里是an example of the above - try resizing browser

wordpress

来源：https://stackoverflow.com/questions/19807778/wordpress-core-responsive-video-not-working-with-shortcode

4条答案

按热度按时间

ctrmrzij1#

使用下面的CSS为WordPress的视频短代码输出

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

字符串

赞(0）回复(0）举报 5个月前

2jcobegt2#

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

赞(0）回复(0）举报 5个月前

ffx8fchx3#

当WordPress输出[video]短代码时，它会将视频 Package 在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。
所以，我认为你只需要确保扩展站点上的视频的原始输出足够大，以填充你的响应式 Package div。