以叠加方式呈现的YouTube视频,如果我在div中单击,似乎会关闭

时间:2015-11-23 10:34:20

标签: javascript jquery css youtube

想法是在点击按钮后自动在叠加层中播放视频。代码当前正在工作和播放,但视频无法在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();
});

0 个答案:

没有答案