html - 谁能告诉我为什么这没有响应？

Question

在网站上工作时此动画没有响应。我已将宽度更改为 100% 并添加了 css。谁能帮我吗？这是网站链接.. armani.globerunnerstaging.com

这是我的 html 和 css

<div class="video-container">
<iframesrc="https://content.understand.com/hair-loss-dallas.player?PresentationID=4e9e3cad-0f79-49c0-a204-8193a6a4264b&amp;CatalogID=3fcc6564-3065-4b92-a116-8a692f3572d5" width="100%" height="557" frameborder="0" scrolling="no">
</iframe>
</div>

.video-container {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto; 
-webkit-overflow-scrolling:touch;
border: solid black 1px;
} 
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer 1

首先，iFrame 的宽度属性不能有百分比单位:

width="100%" height="557" frameborder="0"

应该是像素。例如:

width="701" or width="701px"

但您的主要问题是在您的 iFrame 中显示的播放器有一个固定宽度为 701 像素的容器。

div#container
{
 background: #FFF;
 margin: 0 auto;
 padding: 0;
 width: 701px;
 height: 557px;
}

这意味着即使您的 iFrame 的宽度小于 701 像素，其内容也不会缩小到该限制以下。

除非您可以在 iFrame 中编辑页面的 CSS，否则无法更改此行为。

更新: 也许如果您尝试使用 CSS Scale 变换，您可以让它适用于移动设备。

.video-container iframe{
  -ms-transform-origin: 0 0; /* IE 9 */
  -webkit-transform-origin:  0 0; /* Chrome, Safari, Opera */
  transform-origin: 0 0;
  -ms-transform: scale(0.75); /* IE 9 */
  -webkit-transform: scale(0.75); /* Safari */
  transform: scale(0.75);
}

确保先更正 iframe 属性 width:"100%"。 这是一个例子:http://codepen.io/Rubecula/pen/CtKdH