如何在彈出窗口中播放YouTube視頻？

我想創建一個彈出窗口，將播放YouTube視頻。但我不知道，由於某種原因，它不會發生。我已經包含了我嘗試過的代碼。我正在嘗試在wordpress中使用它。如何在彈出窗口中播放YouTube視頻？

<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視頻。

來源

2015-11-02 Stephen Rodriguez

任何錯誤訊息？ – vard

嘗試增加preventDefault()您點擊

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

來源

2015-11-02 09:33:45

'return false;'應該達到相同的效果 - 它相當於'e.preventDefault（）'和'e.stopPropagation（）' – vard

要在彈出的添加視頻，你也可以在你的情況下使用

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

來源

2015-11-02 10:00:26 UnmeshD

您可以使用此

你的鏈接

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

非常簡單，在控制檯工作

來源

2016-12-06 23:55:43

如何在彈出窗口中播放YouTube視頻？

回答

相關問題