2013-07-01 18 views
0

我试图将视频嵌入到我的网页有隐藏/显示div功能,隐藏/显示div的作品,但嵌入式视频doesn' t,在Firefox中,当我点击显示包含YouTube视频的div的文本时,它只显示一个黑色补丁(我认为这是因为这是我背景的颜色),但如果我在Chrome中启动它,则会显示一个白色表示该网页无法找到,IE说它找不到该网页。YouTube的嵌入式视频不工作在我的所有浏览器:火狐浏览器,IE浏览器和Chrome

我从分享按钮直接从YouTube视频中复制嵌入代码,它使用'<iframe>'标记而不是'<object>'标记,我不确定这与它有什么关系。

下面是视频的嵌入代码我想嵌入:

<iframe width="640" height="360" src="//www.youtube.com/embed/1qNQHv6jdyY?rel=0" frameborder="0" allowfullscreen></iframe> 

这里是我的网页到目前为止(尚未完成):

<!DOCTYPE HTML> 

<HTML> 
<HEAD> 
<TITLE>Index</TITLE> 

<link rel="stylesheet" type="text/css" href="DubWin By Chris Mckee-Rogers.css"> 

<SCRIPT type="text/javascript"> 
function toggleShowHide(elementId) { 
var element = document.getElementById(elementId); 
if (element) { 
    if (element.style.display == "none") 
     element.style.display = "inline"; 
    else 
     element.style.display = "none"; 
} 
} 
</SCRIPT> 

</HEAD> 
<BODY> 

<div class="Container"> 
<img src="images/logo.png" alt="Logo"> 
<div class="Menu"> 
<a href="Index.html">Home</a> | <a href="artist-info.html">Artists Information</a> | <a href="songs-and-mixes.html">Songs And Mixes<a> | <a href="forms.html">Forms<a> 
</div> 

<DIV class="Con-text"> 
<h1 style="text-align: center;">Here you'll be able to hear a few of my personal selected mixes and tunes</h1> 

<h2 onClick="toggleShowHide('12th Planet')">12th Planet</h2> 
<div id="12th Planet" style="display:none"> 
<iframe width="640" height="360" src="//www.youtube.com/embed/1qNQHv6jdyY?" frameborder="0" allowfullscreen></iframe> 
</div> 
<br> 
<h2 onClick="toggleShowHide('Bar 9')">Bar 9</h2> 
<div id="Bar 9" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Bassnectar')">Bassnectar</h2> 
<div id="Bassnectar" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Chase & Status')">Chase & Status</h2> 
<div id="Chase & Status" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Digital Mystikz')">Digital Mystikz</h2> 
<div id="Digital Mystikz" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('DJ Fresh')">DJ Fresh</h2> 
<div id="DJ Fresh" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Doctor P')">Doctor P</h2> 
<div id="Doctor P" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Flux Pavillion')">Flux Pavillion</h2> 
<div id="Flux Pavillion" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Foreign Beggars')">Foreign Beggars</h2> 
<div id="Foreign Beggars" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Gemini')">Gemini</h2> 
<div id="Gemini" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Going Quantum')">Going Quantum</h2> 
<div id="Going Quantum" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Kryptic Minds')">Kryptic Minds</h2> 
<div id="Kryptic Minds" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Magnetic Man')">Magnetic Man</h2> 
<div id="Magnetic Man" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('ModeStep')">ModeStep</h2> 
<div id="ModeStep" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Mt Eden')">Mt Eden</h2> 
<div id="Mt Eden" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Nero')">Nero</h2> 
<div id="Nero" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Pendulum')">Pendulum</h2> 
<div id="Pendulum" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Rusko')">Rusko</h2> 
<div id="Rusko" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Skrillex')">Skrillex</h2> 
<div id="Skrillex" style="display:none"> 

</div> 
<br> 
<h2 onClick="toggleShowHide('Sub Focus')">Sub Focus</h2> 
<div id="Sub Focus" style="display:none"> 

</div> 

</DIV> 

</div> 
<br> 

</BODY> 
</HTML> 

感谢所有的你的帮助。

+0

请问如果添加'HTTP它的工作:''到... //www.youtube.com'? – doubleDown

+0

不知道,应该给它,并会在我有时候报告。 – cm125192

+1

如果你同时使用'http://'和'https://',Youtube使用'// www'来兼容 - 如果你通过本地web服务器运行它,也就是说WAMP在Windows上运行,如果您只是用'file://'协议在浏览器中打开文件 - http://stackoverflow.com/questions/9646407/two-forward-slashes-in-a-url-src-href-attribute –

回答

7

YouTube使用//www如果您同时使用http://https://是兼容 - 如果你通过一个Web服务器在Windows上本地运行,即WAMP它工作正常,但如果你只是在用浏览器打开该文件file://

参考 - Two forward slashes in a url/src/href attribute

+0

非常感谢帮助我的朋友。我一直试图让它工作几个小时。 –

相关问题