Question

我正在尝试创建一个播放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视频。

Answer 1

尝试在点击中添加preventDefault()

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

Answer 2

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

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

Answer 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>

非常简单且有效

如何在弹出窗口中播放YouTube视频？

3 个答案: