【发布时间】：2014-12-08 14:42:09
【问题描述】：
我正在尝试使用 iframe 在我的网站上嵌入视频。视频在 Chrome 中显示正常，但在 Firefox 和 Safari 中，视频被放大，只能看到一部分。我尝试使用转换，但无济于事。我还为 iframe 和 div 尝试了不同的尺寸、百分比和自动。这些都没有奏效。提前感谢您的帮助。
截图链接：
火狐：http://puu.sh/cb8Mk/2c7e268cba.png
铬：http://puu.sh/cb8OH/7abe55f0e2.png
Safari：http://puu.sh/cb8WJ/22873cdaaa.png
当我尝试在 Firefox 中使用转换时会发生这种情况： http://puu.sh/cbaZa/61e9c241c6.png
我正在使用 AngularJS。这是HTML和CSS。
<div id="video-container">
<iframe id="iframe-video" height="285px" width="510px" ng-src="{{ videoMove }}" frameborder="0" controls></iframe>
</div>
#video-container {
float:right;
padding: 0px;
margin: 0px;
width: 60%;
height: 285px;
overflow:hidden;
background-color: #000000;
}
#iframe-video {
width: 100%;
height: 100%;
display: block;
position:relative;
}
【问题讨论】：
-
视频在哪里托管？有时嵌入视频会引入 js/css。另外，尝试在 iframe 本身的 css 或内联中设置尺寸。不要两者都做，它会混淆很多浏览器。
-
不同的浏览器对
iframes 的处理方式不同。当我在几个浏览器上将 PDF 放入iframe时，我注意到了这一点。在某些浏览器中，内容会适合，在其他浏览器中，您只会看到页面的一部分。从技术上讲，这是一个不同的窗口。确保进入iframe的内容与iframe的大小完全相同，包括内边距、边距和边框。 -
@jorblume 视频位于公共文件夹中。
-
然后我会在 css 中设置尺寸并忘记内联样式。
-
@jorblume 我删除了 iframe 标记中的尺寸，并在 CSS 中设置它们，但这并没有改变任何东西。 ://
标签： javascript css html angularjs iframe