如何在弹出窗口中播放 youtube 视频？答案

【问题标题】：How to play a youtube video in popup?如何在弹出窗口中播放 youtube 视频？
【发布时间】：2016-02-02 03:37:21
【问题描述】：

我正在尝试创建一个将播放 youtube 视频的弹出窗口。但我不知道，由于某种原因，它没有发生。我在下面包含了我尝试过的代码。我正在尝试在 wordpress 中使用它。

 <a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 1</a>
 <a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 2</a>

 <div class="modal" id="video-modal">
  <div id="video-container" style="width: 425px; height: 344px;"></div>

<script language="javascript" type="text/javascript">
     $(function() {
    var videoModal = $('#video-modal').overlay({
        expose: {
            color: 'black',
            loadSpeed: 200,
            opacity: 0.85
        },
        closeOnClick: true,
        api: true
    });

    $('.video-link').click(function() {
        videoModal.load();

        var videoUrl = $(this).attr('href');
        var flashvars = {};
        var params = {
            allowFullScreen: "true",
            allowscriptaccess: "always"
        };
        var attributes = {};

        swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);

        return false;
    });
});

谁能纠正我哪里出错了。点击链接到 youtube 视频。

【问题讨论】：

控制台中有错误信息吗？

标签： php jquery wordpress youtube

【解决方案1】：

要在弹出窗口中添加视频，您也可以使用

http://www.youtube.com/embed/(ID of video)?parameters

你的情况

 <a href="http://www.youtube.com/embed/2cxqZiWyW3g?autoplay=1"
class="video-link">Video 1</a>

我已经为它创建了codepen，请检查一下 http://codepen.io/unmeshdusane/pen/WQKvPQ

【讨论】：

【解决方案2】：

尝试将preventDefault() 添加到您的点击中

$('.video-link').click(function(e) {
    e.preventDefault();
...
});

【讨论】：

return false; 应该达到相同的效果 - 它相当于 e.preventDefault() 和 e.stopPropagation()

【解决方案3】：

你可以用这个

你的链接

<a href="#play" onclick="popupYT('2cxqZiWyW3g')">Video 1</a>

<a href="#play" onclick="popupYT('607RMNoJfl4')">Video 2</a>

和脚本

    <script>
    function popupYT(id) {
    window.open('https://www.youtube.com/embed/'+id, 'popup', config='height=375,width=450')
    }
   </script>

非常简单且有效

【讨论】：

这不是弹出窗口。这是一个新寡妇
是的，它是大多数浏览器的新弹出窗口。带有弹出窗口拦截器。您可以将它与 jquery ui 或 wahtever 一起使用。它简单而有效;-)