【问题标题】:Video height and width for responsive website响应式网站的视频高度和宽度
【发布时间】:2015-01-29 00:18:25
【问题描述】:

我在响应式网站上使用视频 HTML5 标记。我将高度和宽度设置为 100%,它可以正常工作,但在破坏布局的移动版本中除外。

网址:omob-2.myshopify.com

<div style="height: 100%; width: 100%;"> 
<video width="100%" height="100%" autoplay>
<source src="intro_12_07_14.mp4" type="video/mp4">
</video> 
</div>

有什么想法吗?

【问题讨论】:

  • 你可以考虑使用 Vimeo 视频,几乎所有东西都支持它!
  • 浏览器支持video标签。视频播放。那不是问题。出于某种原因,视频标签正在破坏布局。

标签: html video mobile responsive-design


【解决方案1】:

您可以同时使用 max-width 属性或 object-fit 属性来实现此目的。请参阅参考资料:Using the object-fit propertyUsing the max-width property with fill-available

/* Using fill-available on the max-width property */

/* A box you would like to place the video in*/
.wrapper {
   width: 600px
   height: 300px;
}

/* The video */
.wrapper_video > video {
   width: 100%;
   max-width: -webkit-fill-available;
   max-width: fill-available;
}


/* The object-fit property defines how an element responds to the height 
and width of its content box.*/

/* A box you would like to place the video in*/
.wrapper {
   width: 600px
   height: 300px;
}

/* The video */
.wrapper_video > video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

【讨论】:

    【解决方案2】:

    在不支持 video 标签的设备上,您将改为显示图像。这里有一个答案How can I display an image if browser does not support HTML5's <video> tag

    编辑:在 css 样式而不是视频标签中设置宽度和高度。只设置宽度,保持尺寸比例,像这样。

    video {
        width: 100%;
        height: auto   !important;
    }
    

    【讨论】:

    • 此浏览器支持 video 标签。它播放视频。只是它打破了我的布局,这在视频标签之前非常好。我所做的只是将其高度和宽度设置为 100%,我原以为在现有布局中会将其设置为 100%。
    • 总是保持比例吗?意思是,如果我设置 100% 高度和 100% 宽度,它不会填满容器的高度和宽度?
    • 据我所知,如果您设置了高度,它将拉伸视频,除非顶级元素设置了适当的高度来包含它,从而使 100% 的高度不会进一步扩展。只使用宽度并让浏览器完成剩下的工作会更容易。
    • 最好将高度设置为自动。高度:自动!重要;
    • 我无法让它填满整个高度和宽度。
    【解决方案3】:

    使用 CSS3 transform translate(-50%, -50%) 使视频位于页面中心:

    HTML代码

          <div class="video-container">
            <video autoplay loop="true" width="1280" height="720">
             <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
           </video>
         </div>
    

    CSS 代码

    .video-container {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        .video-container video {
          /* Make video to at least 100% wide and tall */
          min-width: 100%;
          min-height: 100%;
          /* Setting width & height to auto prevents the browser from stretching or squishing the video */
          width: auto;
          height: auto;
          /* Center the video */
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
        }
        body {
          background: #000;
          color: #fff;
          font-family: 'Oxygen', sans-serif;
        }
    

    请看这里demo

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-02-16
      • 1970-01-01
      • 1970-01-01
      • 2015-03-25
      • 2017-05-29
      • 2013-12-06
      • 1970-01-01
      相关资源
      最近更新 更多