0
多个按钮可以连接到同一页面，而该页面又具有自己的YouTube标识。该按钮可以点击，这将打开模式（弹出）内的YouTube视频。我有一个单一的实例工作，我怎样才能让JavaScript代码处理多个按钮？使用iframe嵌入API的同一页面上的多个YouTube播放器
的HTML（PHP）看起来像如下：
<button id="play-icon-<?php echo $bID; ?>" class="button" target="_blank">Watch our show reel</button>
<div class="remodal video-modal" data-remodal-id="video-modal-<?php echo $bID; ?>">
<button data-remodal-action="close" class="modal-close"><span class="icon-close"></span></button>
<div class="video-wrapper">
<div id="player-container" class="screen"></div>
</div>
<span class="loader"></span>
</div>然后，我有一个触发模式和控制视频的JavaScript代码：
$(function() {
openModal('<?php echo $youtube_ID; ?>');
});
function openModal(video_id) {
var playButton = $('#play-icon-<?php echo $bID; ?>');
var modal = $('[data-remodal-id=video-modal-<?php echo $bID; ?>]');
var settings = {
hashTracking: false
}
var inst = modal.remodal(settings);
var device = $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
playButton.on('click', function(e) {
if (device) {
var yturl = '//www.youtube.com/embed/' + video_id + '?rel=0&showinfo=0&modestbranding=1&autoplay=1&controls=0';
$('body').append('<span id="close-video-modal" class="icon-close"></span><iframe id="large-modal-banner-video" src="' + yturl + '"></iframe>');
} else {
inst.open();
play_video(video_id);
}
});
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var modelPlayer;
var modelPlayerDefaults = {
autoplay: 0,
autohide: 1,
modestbranding: 0,
rel: 0,
showinfo: 0,
controls: 0,
disablekb: 1,
enablejsapi: 0,
iv_load_policy: 3
};
function play_video(id) {
modelPlayer = new YT.Player('player-container', {
videoId: id.toString(),
events: {
'onReady': onModalPlayerReady,
'onStateChange': onModelPlayerStateChange
},
playerVars: modelPlayerDefaults
});
}
function onModelPlayerStateChange(e) {
if (e.data === 1) {
$('.loader').fadeOut();
$('#player-container').addClass('active');
} else if (e.data === 0) {
var currentModal = $('#player-container.active').closest('.video-modal');
var inst = currentModal.remodal();
inst.close();
$('#player-container').removeClass('active');
} else {
$('#player-container').removeClass('active');
$('.loader').show();
}
}
function onModalPlayerReady(e) {
modelPlayer.playVideo();
}
$(document).on('closed', '.video-modal', function() {
modelPlayer.destroy();
});
$(document).on('click tap', '#close-video-modal', function(e) {
e.preventDefault();
$('#close-video-modal, #large-modal-banner-video').fadeOut(function() {
$(this).remove();
});
});需要将这些代码包含到可重用函数中，任何帮助都会很棒。