将YouTube视频嵌入到HTML5中

我已经尝试了我已阅读过的有关将YouTube视频嵌入到我的HTML5中的每种方法，但它不适用于任何浏览器。我得到的最好的是一个表示网站无法找到的广场。我尝试过使用旧的嵌入代码，我尝试过使用iframe ......我也尝试过使用新的视频标签......我将每个代码都放到了自己的单独部分（意思是不包含包含在一个div或类似的东西中）......它所包含的唯一东西是身体本身......我也尝试了相反的做法，把所有这三种方法放在某种像div这样的容器中。这并不是说在一个正在或在一个不是应该不会影响它的可玩性，但我想一切......我不明白为什么它是行不通的将YouTube视频嵌入到HTML5中

来源

2013-10-01 MddHtt13

你是不是显示你试过没什么“T工作，但我感觉今天通灵所以这里的野生刺：

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，它允许embed标签工作，而不管您的页面是使用http：//还是https访问：// 协议。（您不允许在单页混合使用这些），但

- 我猜测这是你要去哪里错了 - 如果你打开一个HTML5本地文件，而不是通过Web服务器它有一个file：// URL。由于相对URL（包括此古怪协议相对URL）始终从当前页面位置获取其未指定位，因此计算的完整URL无效：

file：//www.youtube.com/embed/sLAEg5aTXAE？feature = player_detailpage

要解决问题，只需更改src属性以指定协议，将相对URL更改为从file：//和http：//协议提供的页面中运行的绝对URL。

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

缺点是你不能把它放在通过https传递的页面上。

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

来源

2013-10-02 05:44:45 Umopepisdn

谢谢你，我的朋友，你是现货。这正是我所做的。我很抱歉发布说明而不是代码，我是这款游戏的新手。我甚至没有想到这是一个相对的联系。我也不知道http/https冲突。另外，我并不知道有一个网站可以测试我的网页，就好像它在服务器上一样。感谢您的帮助。 – MddHtt13

太棒了，@ user2808962！很高兴听到这个帮助。 – Umopepisdn

另外，只是要清楚，WAMP不是一个网站。这是一个程序（实际上是一个软件捆绑），您可以在系统上安装。当程序运行时，它使您的计算机的Web服务器。 – Umopepisdn

将YouTube视频嵌入到HTML5中

回答

相关问题