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属性设置百分比单位：

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

它应该是像素。例如：

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

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

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

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

除非您可以在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属性宽度：“100％”。以下是一个示例：http://codepen.io/Rubecula/pen/CtKdH

谁能告诉我为什么这不响应？

1 个答案: