iframe视频无法正确显示

Question

我尝试使用iframe在我的网站上嵌入视频。 Chrome中的视频效果很好，但在Firefox和Safari中，视频会放大，只能看到一部分。我尝试使用转换，但无济于事。我还尝试了iframe和div的不同尺寸，百分比和自动。这些都没有奏效。感谢您的帮助。

屏幕截图的链接：

Firefox：http://puu.sh/cb8Mk/2c7e268cba.png

Chrome：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;
}

Answer 1

也许您应该尝试使用<video>代码而不是iframe。