触摸时 iframe 视频无法在移动设备 phone 上播放

Question

我使用 `iframe 导入了一个 youtube 视频，但它在移动设备上不起作用，但在桌面上运行完美。

我所说的不工作是指：触摸时视频不会开始播放，如果触摸两次，页面会放大。

代码：

div#video
    iframe(src = 'https://www.youtube.com/embed/mfB19N3ZdS0' frameborder = '0', allowfullscreen = '')

Answer 1

更新

查看您提供的网页 link，问题是您有一个 DIV 覆盖了视频，这意味着无法点击播放按钮。它只发生在浏览器窄的时候，这就是为什么你只能在移动设备上看到它。它似乎也是特定于 safari 的，这使得它更难找到。

如果您在使用开发者工具的 iOS 检查器和连接的 iPhone 中查看 ID 为 "quotesRight" 的 div，或者在 safari a Mac 浏览器缩小到单列宽度，您会看到 div 位于视频顶部，因此您无法点击播放按钮：

如果您在浏览器检查器中删除此 div，则视频在 iOS 设备上播放正常。

我会把原来的答案留在下面，因为当我第一次看的时候这绝对是一个问题，它可能会对某人有所帮助 - 它现在似乎没有给出 SME 内容错误，这很有意义，因为它显然不是中小企业视频。也许这只是他们盗版检查的误报。

下面的示例 HTML 也可用于检查，因为这绝对适用于各种浏览器（据我所知...）。

原回答

假设 HTML 语法正确（我认为您上面的摘录是 shorthand？）那么我认为问题可能出在您使用的特定视频上，该视频似乎在某些方面受到限制内容所有者（在本例中为 SME）的设备。

例如，如果您尝试在 Chrome 上直接在 Mac 上播放它，您会收到此消息：

使用 W3schools 的一个简单示例，在 iPhone 上播放您的视频完全符合您描述的行为。

使用不同的示例视频（我尝试了 Google YouTube 示例中的一个），播放效果很好。

这是带有 YouTube 示例视频的示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

</body>
</html>

Answer 2

将 display: block 添加到 iframe 解决了我的问题

触摸时 iframe 视频无法在移动设备 phone 上播放

iframe video won't play on mobile phone when touched

video

iframe

mobile

video-streaming

pug