javascript - iframe 视频显示不正确

Question

我正在尝试使用 iframe 在我的网站上嵌入视频。视频在 Chrome 中显示正常，但在 Firefox 和 Safari 中，视频被放大并且只能看到一部分。我尝试使用转换，但无济于事。我还为 iframe 和 div 尝试了不同的尺寸、百分比和自动设置。这些都没有用。提前感谢您的帮助。

截图链接:

火狐: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。