想法是在点击按钮后自动在叠加层中播放视频。代码当前正在工作和播放,但视频无法在div内部进行控制,如果您在div中单击,则会自动关闭。
所以我需要帮助才能使视频内部可控,当我点击它时窗口不关闭。
作为一项额外的功能,根据屏幕尺寸,有一个好处就是覆盖窗口能够响应?
谢谢
JS
$("#play1,#play2,#play3,#play4,#play5").click(function() {
var value = $( this ).attr( 'track' );
player.loadVideoById(value,0);
// put in overlay window
openOverlay('#overlay-inAbox');
e.preventDefault();
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('overlay-inAbox',
{
height: '275',
width: '375',
events: {
'onReady': onPlayerReady
}
});
}
});
CSS
function openOverlay(olEl) {
$oLay = $(olEl);
if ($('#overlay-shade').length == 0)
$('body').prepend('<div id="overlay-shade"></div>');
$('#overlay-shade').fadeTo(300, 0.6, function() {
var props = {
oLayWidth : $oLay.width(),
scrTop : $(window).scrollTop(),
viewPortWidth : $(window).width()
};
var leftPos = (props.viewPortWidth - props.oLayWidth) / 2;
$oLay
.css({
display : 'block',
top : '-50%',
opacity : 0
})
.animate({
opacity : 1,
top: '50%'
}, 600);
});
}
function closeOverlay() {
$('.overlay').animate({
top: '-50%',
opacity : 0
}, 400, function() {
$('#overlay-shade').fadeOut(300);
$(this).css('display','none');
});
}
$('#overlay-shade, .overlay a').live('click', function(e) {
closeOverlay();
if ($(this).attr('href') == '#') e.preventDefault();
});
// Usage
$('#overlaylaunch-inAbox').click(function(e) {
openOverlay('#overlay-inAbox');
e.preventDefault();
});