Question

我有一个包含youtube iframe的页面。这就是我需要的： - 视频高度将是浏览器窗口高度的百分比。 - 如果用户调整浏览器窗口大小上下移动光标（使窗口更高或更短），iframe高度将保持百分比，但视频将保持其宽高比（宽度将随高度变化）

这需要完全响应，而不仅仅是重新加载。

行为类似于（在幻想代码中）：

iframe {
    height: 20%;         /* 20% of the browser window height  */
    width: height*1.64;  /* get the value in pixels and multiply by 1.64 */
}

照片在此页面中的行为方式相同： http://hotdot.pro/en/#lophoto
（事实上我正在使用hotdot创建的视差javascript引擎）

我在网上搜索了很多内容，但没有找到任何内容。

有谁知道怎么做到这一点？感谢

Answer 1

感谢您的帮助，但我最终使用了javascript：

window.addEventListener('resize', function(event){
  var cw = $('.youtube').height();
  $('.youtube').css({
      'width': cw*1.64 + 'px',
      'margin-left': '-' + cw*0.82 + 'px'
  });
});

我将以下内联css添加到iframe元素：

position: absolute;
top: 29%;
height: 37%;

如何使iframe垂直响应保持宽高比

1 个答案: