使用 LESS 和 JADE 的 JWPlayer 响应高度元素
Responsive height element for JWPlayer using LESS and JADE
我是 Jade and Less 的新手,我正在尝试构建一个响应式视频播放器,该播放器水平居中并根据其 div 的高度调整大小。
具体来说,播放器元素位于已设置为屏幕高度 40% 的 .banner 内。我试图在保持 16X9 宽高比的同时将播放器最大化到尽可能大。我的方法尝试在给定横幅高度和 16X9 纵横比的情况下将宽度计算为百分比。
JW Player 设置 API 允许 width 由 px 或 % 设置,而 height 只能是由 px 设置。 http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference#basic。
两个问题:
- 如何计算.banner 的高度和宽度?我有
做了很多尝试,但我一直在抛出错误,因为我无法得到
语法正确。
- 我采用的方法似乎非常低效。有没有更合适的方法?
玉档:
block body
div.row
div.banner
div.imaginary
div.text-center
#jwplayer
script(type='text/javascript').
var givenheight = 460
var givenwidth = 2560
var setwidth2 = { percentage: givenheight/9*16/givenwidth*100 + "%"}
jwplayer('jwplayer').setup({
file: 'XXX',
image: 'XXX',
width: setwidth2.percentage,
//height: '300', //height can only be set as px (not %)
aspectratio: '16:9',
autostart: 'true'
});
更少的文件:
.banner {
background: #ff0;
width: 100%;
height: 40%;
padding: 10px 0;
margin-bottom: 10px;
display: block;
overflow: hidden;
position: fixed;
z-index: 1;
top: 50px;
right: 0;
left: 0;
.text-center {
width: 100%;
min-height: 50%;
display: block;
overflow: hidden;
}
}
我相信你能做到:
width: '100%',
aspectratio: '16:9',
像这样设置宽度,使用纵横比变量,应该填满显示。
您也可以尝试添加:
height: '100%',
但可能不需要,因为宽度和纵横比应该是您所需要的。
我是 Jade and Less 的新手,我正在尝试构建一个响应式视频播放器,该播放器水平居中并根据其 div 的高度调整大小。
具体来说,播放器元素位于已设置为屏幕高度 40% 的 .banner 内。我试图在保持 16X9 宽高比的同时将播放器最大化到尽可能大。我的方法尝试在给定横幅高度和 16X9 纵横比的情况下将宽度计算为百分比。
JW Player 设置 API 允许 width 由 px 或 % 设置,而 height 只能是由 px 设置。 http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference#basic。
两个问题:
- 如何计算.banner 的高度和宽度?我有 做了很多尝试,但我一直在抛出错误,因为我无法得到 语法正确。
- 我采用的方法似乎非常低效。有没有更合适的方法?
玉档:
block body
div.row
div.banner
div.imaginary
div.text-center
#jwplayer
script(type='text/javascript').
var givenheight = 460
var givenwidth = 2560
var setwidth2 = { percentage: givenheight/9*16/givenwidth*100 + "%"}
jwplayer('jwplayer').setup({
file: 'XXX',
image: 'XXX',
width: setwidth2.percentage,
//height: '300', //height can only be set as px (not %)
aspectratio: '16:9',
autostart: 'true'
});
更少的文件:
.banner {
background: #ff0;
width: 100%;
height: 40%;
padding: 10px 0;
margin-bottom: 10px;
display: block;
overflow: hidden;
position: fixed;
z-index: 1;
top: 50px;
right: 0;
left: 0;
.text-center {
width: 100%;
min-height: 50%;
display: block;
overflow: hidden;
}
}
我相信你能做到:
width: '100%',
aspectratio: '16:9',
像这样设置宽度,使用纵横比变量,应该填满显示。
您也可以尝试添加:
height: '100%',
但可能不需要,因为宽度和纵横比应该是您所需要的。