使用 LESS 和 JADE 的 JWPlayer 响应高度元素

Question

我是 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;
  }
}

Answer 1

我相信你能做到：

width: '100%',
aspectratio: '16:9',

像这样设置宽度，使用纵横比变量，应该填满显示。

您也可以尝试添加：

height: '100%',

但可能不需要，因为宽度和纵横比应该是您所需要的。

使用 LESS 和 JADE 的 JWPlayer 响应高度元素

Responsive height element for JWPlayer using LESS and JADE

node.js

less

pug

jwplayer