移动嵌入式Youtube iframe无法播放

Question

我的网站上有一个youtube iframe视频无法播放，但仅限于移动设备（我在iPhone5上使用iOS7）。它在我测试过的桌面浏览器中运行良好，所以我不确定它为什么不能在我的移动设备上播放。我从未在iOS6上测试它。

我正在使用媒体查询来控制iframe的宽度和高度，但是无法理解为什么会产生问题（此外，媒体查询可以正常使用桌面上的视频）..你有什么想法吗？为什么不玩？您可以在http://nickbewley.com/music/lee-fields/查看问题示例。谢谢你的任何想法！

Answer 1

以下div与它重叠..您无法点击/触摸它来播放。

<div class="music-description">My Favorite Album by Lee Fields: </div>

忘记正好掩盖问题的z-index。而是解决问题：

.music-description {
    display: block; /* REMOVE */
}

.music-title {
    display: inline; /* REMOVE */
    display: block; /* ADD */
}

或者只需将span代码更改为divs（参考.music-title）

这样做可以为您提供所需的风格。