同じページに複数のYouTubeAPIIframeを配置できない理由を整理するのを手伝ってもらえますか？このコードを別のインスタンスとしてコピーして貼り付けようとすると、どちらか一方が表示されません。このコードの最初の行のいくつかを削除しようとしましたが、それが問題の原因であると思われるためですが、私はJavascriptに比較的慣れていないため、どうすればよいかわかりません。
ページに約6つのYoutubeクリップをインストールし、APIを使用して、含まれているDIVが非表示になっているときにstopVideo（）を使用できるようにする必要があります。
ヘルプ！お願いします！私のコードが醜い場合や不要なものを呼び出している場合はご容赦ください。私はそれを機能させるために24時間これでコードを投げてきました。
各プレイヤーは、独自のAbsoluteDivに所属しています。次に、YoutubeAPIを使用してYoutubedivが作成されます。
たとえば、これは1つのインスタンスです...
<div id="notes1" style="position:absolute; z-index:0; width:541px; left: 363px; top: 224px; height: auto; overflow:auto; overflow-x: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<div id="notesplayer"></div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var notesplayer;
function onYouTubeIframeAPIReady() {
notesplayer = new YT.Player('notesplayer', {
height: '365',
width: '425',
videoId: 'cmIg9MWhVss',
playerVars: {
modestbranding: 1,
wmode: "opaque",
autoplay:0,
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
notesplayer.stopVideo();
}
function stop() {
if (notesplayer) {
notesplayer.stopVideo();
}
}
</script>
</div>
そしてこれは別の例です...
<div id="married" style="position:absolute; z-index:0; width:541px; left: 363px; top: 224px; height: auto; overflow:auto; overflow-x: hidden; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden;">
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var marriedplayer;
function onYouTubeIframeAPIReady() {
marriedplayer = new YT.Player('marriedplayer', {
height: '365',
width: '425',
videoId: 'nREbUaxUlmE',
playerVars: {
modestbranding: 1,
wmode: "opaque",
autoplay:0,
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
marriedplayer.stopVideo();
}
function stop() {
if (marriedplayer) {
marriedplayer.stopVideo();
}
}
</script>
</div>
そして最終的には、既存の表示/非表示のイメージマップ内の各ビデオを制御/停止できるようにしたいです...たとえば...
<area shape="rect" coords="8,19,561,74" href="#" alt="Home" onmouseover="MM_showHideLayers('Film-Menu-Plain','','hide','Film-Menu-Married','','hide','Film-Menu-Run','','hide','Film-Menu-Notes1','','hide','Film-Menu-Notes2','','hide');notesplayer.stopVideo();marriedplayer.stopVideo();"/>
私は一体何を間違っているのですか？