将youtube上的视频嵌入HTML5

Question

我已经尝试了所有我读到的将youtube视频嵌入到我的HTML5中的方法，但是它在任何浏览器中都是行不通的。我得到的最好的就是一个广场，上面写着网站找不到。我尝试使用旧的嵌入代码，我尝试使用iframe.我也尝试使用新的视频标记.我将每一个代码都丢弃到它们各自的单独部分(意思是不包含在div或类似的东西中)...The只包含在身体中的东西.我也尝试了相反的方法，把所有这三种方法放在类似div的容器中。不是说在一个或不在一个应该会影响它的可玩性，但我正在尝试一切.我不明白为什么它就是不能工作

Answer 1

你没有展示你尝试过的，但我今天感觉灵媒，所以这里有一个疯狂的尝试：

YouTube目前提供的嵌入链接如下：

<iframe width="640" height="360"      
  src="//www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
  frameborder="0" allowfullscreen></iframe>

不寻常的是，URL --在IFrame标记的"src“属性中--没有指定协议。

上面src属性的格式是一种称为协议相对URL的相对URL，它允许嵌入标记工作，而不管您的页面是用http://还是https://协议访问的。(不允许在一页中混合这些内容)

但是--我猜这就是你出错的地方--如果你在本地打开一个HTML5文件，而不是通过一个web服务器，它有一个文件:// URL。因为相对URL --包括这个奇怪的协议--相对URL --总是从当前页面位置获取它们的未指定位，因此正在计算的完整URL是无效的：

file://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage

要修复，只需更改src属性以指定协议，将相对URL更改为一个绝对URL，该URL来自与文件://和http://协议一起服务的页面。

<iframe width="640" height="360"      
  src="http://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
  frameborder="0" allowfullscreen></iframe>

缺点是不能将其放在通过https传递的页面上。

从长远来看，您应该养成从真正的web服务器而不是文件URL进行测试的习惯。对于本地安装的测试服务器，WAMP/MAMP是一个简单而流行的选择。