2016-10-02 83 views
0

我使用iframe导入了YouTube视频,但它不适用于手机,但在桌面上运行完美。iframe视频无法在手机上播放时触摸

如果不工作,我的意思是:当它触及视频不会进行播放,如果它的双触摸时,页面缩放

代码:

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

你能解释一下你的意思是由它母鹿鼻涕工作 - 究竟是怎么回事? – Mick

+0

@Mick不工作,我的意思是:当你触摸它时,视频不会开始播放,如果你双击它,页面会放大。 – Paul

回答

0

添加display: blockiframe解决我的问题

1

更新

看着你提供的网页链接,问题是你有一个覆盖视频的DIV意味着播放按钮不能被击中。它只发生在浏览器很窄时,这就是为什么你只能在移动设备上看到它。它也似乎是特定的safari,这使得它很难找到。

如果您在使用开发人员工具和连接的iPhone的iOS检查器中查看id为“quotesRight”的div,或者在浏览器缩减为单列宽度的Mac浏览器中查看div,您会看到如果删除这个div在浏览器中检查视频正常播放的iOS设备上

enter image description here

:即股利是在视频之上,所以你不能打的播放按钮。

我会在下面留下原来的答案,因为当我首先看,它可能会帮助某人时,它肯定是一个问题 - 它似乎没有给现在的SME内容错误,这是有道理的,因为它显然不是中小企业视频。也许这只是对盗版支票的误判。

此外,下面的示例HTML对于检查很有用,因为这绝对适用于所有浏览器(据我所见...)。

原来的答复

假设HTML语法是正确的(我觉得你上面的提取物是速记?),那么我认为这个问题可能是您正在使用的出现在某些设备上被限制在特定的视频内容所有者(本例中的SME)。

例如,如果你试图发挥它在Chrome Mac上直接与你得到这个消息:

enter image description here

使用从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> 
+0

我的代码是一个'玉代码'。选择'share'后,我使用'Google'给我的代码。 '