Question

我一直在寻找这个问题的解决方案，但直到现在我还没找到。

我需要为视频提供绝对位置，并且其大小将根据此定位（通过给出顶部，右侧，底部和左侧值）而改变。当我这样做时，运行iOS 8+的iPhone上的播放按钮停止居中。

以下是正在发生的事情的印刷品：

我已经能够在JSFiddle上重现这个错误：https://jsfiddle.net/hwgnzwzf/2/ - 当我设置一个“左”属性时，它似乎开始出现。

<div class="video-holder">
    <div class="video">
        <div class="video-wrapper video-wide">
            <video controls poster="http://placehold.it/200x200">
                <source src="" type="video/mp4"/>
            </video>
        </div>
    </div>
</div>


.video{
    position: absolute;
    top:0;
    left:40%;
    right:20%;
    bottom:0;
}

/ edit：在Doml的输入后，我尝试只设置'right'值和'max-width'，但最终结果是相同的。

Answer 1

问题是，iOS需要两个属性，无论是top / left |底部/右部，你只需将其降至40％一个绝对容器“居中”的更好的解决方案是将它放在屏幕的中心，并将它放在它的宽度的一半：

left:50%;
transform: translateX(-50%);

我没有iPhone，所以请告诉我这是否适合您

编辑：//哦，如果你想“调整大小”，只需添加一个最大宽度并删除“正确”属性

Answer 2

这是一个iOS问题，我的解决方案是删除视频控件属性，以便我们删除iOS样式，然后再用css添加它。

使用js，我们可以再次添加控件，点击并使用html5 api播放视频。

然后，解决方案可能类似于https://jsfiddle.net/99eanxjr/1/

$('video').on('click', function(e){
    var video = this;
    $(video).attr('controls', true).parent().addClass('started');
    video.play();
});

显然，您可能会记住，这是一种hacky解决方案，应该以您的需求为条件，例如仅在iOS上执行此操作并在发布实际修复后删除此hack。也需要CSS前缀。 = P

我刚刚写完，需要测试！ =）

祝你好运！

Answer 3

对我来说至少（在iphone6 plus上测试）问题是由

引起的

div[pseudo="-webkit-media-controls"] {
  min-width: 260px;
}

位于ios创建的＃document-fragment的用户代理样式表中。我在browserstack中测试，当我检查元素时，我可以看到这是原因。

我搜索了一下，但找不到用css或javascript定位#document-fragments的方法。所以...我被困住了，但我觉得这是正确的方向。

iOS 8+上的播放按钮不居中

3 个答案: