Question

我正在尝试运行一个脚本，其中..a滑块网址为＃，滑块按钮的名称为＆＃34; slide_8＆＃34;。当有人点击它时会弹出一个youtube视频。在我的脚本下面，视频正在播放，但无法在浏览器的任何地方播放。我已将youtube网址保留在javascript中。

<div class="overlay" style="display: none;"></div>
<div class="propose-video-wrap" style="display: none;"> 
<div id="propose_video"></div> 
</div> 
<script type="text/javascript">
$('#slide_8').click(function() {
    var video_htm = '<a class="pop-close-btn" onclick="closeVideoPopup();"></a> <iframe id="propose_video_iframe" width="300" height="150" src="//www.youtube.com/embed/SQtxJ15vzOU?rel=0&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>';
    $('#propose_video').html(video_htm);
    $('.overlay').css('display', 'block');
    $('.propose-video-wrap').css('display', 'block');
    $('body').css('overflow-y', 'hidden');
});

function closeVideoPopup() {
    $('.overlay').css('display', 'none');
    $('.propose-video-wrap').css('display', 'none');
    $('#propose_video').html('');
    $('body').css('overflow-y', '');
}
</script>

Answer 1

我在JSfiddle中粘贴了这段代码，添加了一个按钮就可以了。我所做的唯一更改是添加一个事件监听器来点击关闭按钮，因为由于某种原因，内联没有在JSfiddle上工作，以及在关闭按钮中插入一些文本，所以它＆＃ 39;可以点击它。

问题可能与您的样式有关，例如您的任何元素都有负z-index或以奇怪的方式定位。禁用display: none属性并首先在这些HTML元素中插入一些文本，然后查看它们的最终位置。

如果您希望了解我的最终结果，here is is。

单击滑块按钮上的Javascript视频弹出窗口

1 个答案: