0

非表示/表示 div 機能を持つ Web ページにビデオを埋め込もうとしています。非表示/表示 div は機能しますが、埋め込まれたビデオは機能しません。Firefox で、含まれている YouTube で div を表示するテキストをクリックするとビデオには黒いパッチが表示されるだけです（それは私の背景の色だからだと思います）が、Chromeで起動すると、Webページが見つからないことを示す白いボックスが表示され、IEはWebページが見つからないと言います同じように。

'<iframe>'タグではなくタグを使用して、共有ボタンからYouTubeビデオ自体から埋め込みコードを直接コピーしましたが、'<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>

ご協力いただきありがとうございます。

4

1 に答える 1

7

両方を//www使用している場合、YouTube は準拠していました。ローカルで Web サーバー経由で実行すると (Windows の WAMP など)、正常に動作しますが、ブラウザーでhttp://https://file://

参考 - url/src/href 属性の 2 つのスラッシュ

于 2013-07-01T15:29:16.440 に答える