css如何改变视频大小,调整视频的大小取决于屏幕尺寸少用CSS

我想在我的主页的背景添加视频。 基本上我想避免当浏览器分辨率与我的视频分辨率不同时在边上有黑色条纹。调整视频的大小取决于屏幕尺寸少用CSS

要优化加载时间，我想用更少的CSS，所以我想在更短的像这样来定义价值做到这一点：

@videoHeight: '1080';

@videoWidth: '2048';

@alphaVideo: '1,9';

@winHeight:'$(window).height()';

@winWidth:'$(window).width()';

@alphaWin: @winHeight/@winWidth;

@media only screen and (min-width: @alphaVideo * @winHeight) {

#video-background {

transform: scale(1.1);

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-o-transform: scale(1.1);

}

}

，但我得到了下面的错误在我的浏览器： OperationError：无效类型 在无效行0，列0上的操作：

1 @ videoWidth：'2048';

我该如何解决这个问题？

感谢

+0

使用JS的替代方法：http://stackoverflow.com/questions/18090595/center-fullscreen-background-video/18091239#18091239 –

+0

可能重复的[创建div平方，并相应地居中使用视图端口使用较少](http://stackoverflow.com/questions/17983241/create-a-div-square-and-center-it-accordingly-the-view-port-using-less) –