具有固定高度的HTML5视频，但缩放宽度为100％ [英] HTML5 video with fixed height, but scale width to 100%

问题描述

我想要做的是有一个HTML5视频缩放100％的页面宽度，但保持固定高度为650px。

 < header& < video width =100％autoplay =autoplay> < source src =video.webmtype =video / webm; codecs = vp8，vorbis> < / video>< / header>  

a max-height =650px但这只是视频的中心并留下两侧的空格。

解决方案

什么paypal是放大视频根据视口。

因此，如果您想将视频从小型设备扩展到大型设备，则可以将视频与基本标记配合使用：

 < video width =100％height =auto> ... 
  

这将扩大您的视频。问题是当你去一个小视口。视频将缩小但可能太小，因此您可以定义最小高度并使用CSS变换来放大视频方面：

  video {
 transform：scale（1.5）; 
 -webkit-transform：scale（1.5）; 
} 
  

通过媒体查询，您可以定义断点并缩放这些屏幕的视频。 / p>



还有一些javascript，你也可以为你的视频定义一个焦点（如果视频的某些区域更重要）。

有关详情，请查看此链接：

http://viget.com/extend/fullscreen-html5-video-with-css-transforms

What I want to do is have an HTML5 video scale 100% width of the page, but maintain a fixed height of 650px.

The following code scales to maintain aspect ratio, which is not what I need:

<header>
    <video width="100%" autoplay="autoplay">
        <source src="video.webm" type="video/webm; codecs=vp8,vorbis">
    </video>
</header>

I also tried a max-height="650px" but this only centres the video and leaves whitespace on either side.

解决方案

What paypal does is scaling up the video according to the viewport. But they dont go mobile, and this is a problem.

So if you want to scale your video from small to big devices, you can put your video with the basic markup:

<video width="100%" height="auto">...

This is going to scale up your video. The problem is when you go to a small viewport. The video will scale down but can be too small, so you can define a min-height and use CSS transforms to scale up the video aspect:

video{
transform: scale(1.5);
-webkit-transform: scale(1.5);
}

With media queries you can define breakpoints and scale the video for those screens.

Also with some javascript you can also define a point of focus for your video (if some area of the video is more important).

Check this link for more details on that:

http://viget.com/extend/fullscreen-html5-video-with-css-transforms

这篇关于具有固定高度的HTML5视频，但缩放宽度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！