node.js - 使用 LESS 和 JADE 的 JWPlayer 的响应式高度元素

Question

我是 Jade 和 Less 的新手，正在尝试构建一个响应式视频播放器，该播放器水平居中并根据其 div 的高度调整大小。

具体来说，播放器元素位于 .banner 内，该横幅已设置为屏幕高度的 40%。我试图将播放器最大化，同时保持 16X9 的宽高比。我的方法尝试根据横幅高度和 16X9 宽高比将宽度计算为 %。

JW Player 设置 API 允许按 px 或 % 设置宽度，而高度只能按 px 设置。 http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference#basic 。

两个问题:

1. 如何计算 .banner 的高度和宽度？我有 做了很多尝试，但我不断抛出错误，因为我无法得到 语法正确。
2. 我正在采取的方法似乎效率极低。有没有更合适的方法？

Jade 文件:

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'
              });

LESS 文件:

.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%',

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