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

k2fxgqgv  于 11个月前  发布在  WordPress
关注(0)|答案(4)|浏览(135)

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

ctrmrzij

ctrmrzij1#

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

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

字符串

2jcobegt

2jcobegt2#

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

ffx8fchx

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。

  • 注意:我选择1030是因为这是你链接到的示例上的内容区域的大小。*
tvokkenx

tvokkenx4#

宽度参数应该是整数而不是百分比:

width="1140"

字符串
而不是

width=100%


根据video shortcode上的codex页面。

相关问题