Question

我有一个视频可以显示在超过4列的所有屏幕尺寸（xs除外）中。下面的代码没有响应，显示非常大的视频。撕掉我的头发，需要帮助！

<div class="hidden-xs col-sm-4 embed-responsive-16by9">
  <video class="embed-responsive-item" title="Former Balmain Massage therapist Blaise Bowling shows the ins and outs of pregnancy massage" poster="../../images/blaises_pregnancy_poster.jpg" controls  src="../../video/pregnancy360.mp4" type="video/mp4">
</video>
</div>

原始视频的宽度仅为360px，渲染得太大......页面位于https://balmainmassage.com.au/2015/modalities/pregnancy.html

由于

克劳迪奥

Answer 1

在html中，我认为您的<head>：

中有此内容

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

您应该将视频放在<div>这样的内容中：

<div class="responsive_video">                              
<video src="yourfolder/yourvideo.mp4" controls="controls" type="video/mp4" </video>     
</div>

然后，您应该在@media only screen and (max-width : 960px)底部的css下方：

@media only screen and (max-width : 960px) {

    .responsive_video video{
        width:100%;
                }
}

为什么我的嵌入式和放大器响应视频无响应？

1 个答案: