带有videoJS的嵌入式视频 - Safari的尺寸问题

好吧我已经有了一些与Chrome完美结合的工具，但在Safari中它有点奇怪。带有videoJS的嵌入式视频 - Safari的尺寸问题

第一个视频播放的很好，完全按照我的要求播放，但是在页面的另一端我有另一个嵌入的视频，尽管我使用的是相同的代码，除了'autoplay'和视频文件，当然，第二个是真的很大，似乎是双倍的高度..

这就像它每次增加100％。

这是第一次一个

<video autoplay id="my_video_1" class="video-js vjs-default-skin" controls 
preload="auto" poster="../images/posters/1969.png" 
data-setup="{}"> 
<source src="../videos/1969.mp4" type='video/mp4'> 
<source src="../videos/1969.webm" type='video/webm'> 
</video>

，第二个

<video id="anothervideo" class="video-js vjs-default-skin" controls 
preload="auto" poster="../images/posters/1969.png" 
data-setup="{}"> 
<source src="../videos/video-2.mp4" type='video/mp4'> 
<source src="../videos/video-2.webm" type='video/webm'> 
</video>

认为它可能是使用两个相同的ID是造成问题的HTML，所以使用两个独立但没有做任何事情，这里的代码的css

min-height: 100%; min-width: 100%; height: auto !important; width: auto !important;

不知道发生了什么事情！

来源

2013-04-11 nickoreardon

你有一个可以链接到的工作示例吗？ – Fernker 2013-04-11 17:47:12

http://www.oreardon.com/test/1969/index.html - 没有得到那里的视频，但你明白我的意思，我也玩过几件事，所以它有点改变了，它现在更大！ – nickoreardon 2013-04-11 18:13:05

该页面上的每个部分（块）对我来说看起来都很好。我在Chrome Dev：Mac上，每一个部分都和窗口一样高而宽，没有一个看起来比他们需要的更大或更小，那么你是否能够解决这个问题，还是仍然在发生？你是否使用？ – Fernker 2013-04-11 18:55:24

我错过了它在Safari中的那一部分。但我有你的解决方案。所以它似乎是造成问题的最小高度。你可以做的是添加此CSS：

#my_video_2{ 
    min-height:inherit; 
}

看来，具有第二视频引起的问题，但它是需要第一视频才能正常显示。

看看是否有效。

来源

2013-04-11 19:41:54 Fernker

它已经使它消失在一起，除非我做错了什么，我已更新该链接^^ 编辑：好吧，但有0px的高度 – nickoreardon 2013-04-11 19:48:18

我一直使用max-height：100％来加载它，但只要按下播放按钮，视频就会消失。令人沮丧！ – nickoreardon 2013-04-11 20:15:46

你将不得不继续玩弄它，你正在对CSS做很大的改动（这对测试很有帮助），但是我不能跟上你现在正在做的事情， – Fernker 2013-04-11 20:19:51

带有videoJS的嵌入式视频 - Safari的尺寸问题

回答

相关问题