在WordPress插件中的Lightbox中播放YouTube視頻

在我的WordPress插件中，我需要一個LightBox樣式的彈出窗口才能打開並播放YouTube視頻。該插件具有自定義帖子類型，用戶已經提供了一個保存爲post_meta的YouTube網址。在WordPress插件中的Lightbox中播放YouTube視頻

我有一個縮略圖的視頻，並認爲我可以創建一個與oembed函數的彈出鏈接，但顯然這並沒有幫助。不知道從這裏進行的最佳途徑是什麼。

編輯：通過評論

  // Get the URL of the video 
      $wdm_youtube = get_post_meta($wdm_auction->ID, 'wdm_youtube', true); 
      if ($wdm_youtube != '') { 
       // Get the video ID 
       preg_match('#(?<=(?:v|i)=)[a-zA-Z0-9-_]+|(?<=(?:v|i)\/)[^&?\n]+|(?<=embed\/)[^"&?\n]+|(?<=‌‌(?:v|i)=)[^&?\n]+|(?<=youtu.be\/)[^&?\n]+#', $wdm_youtube, $matches); 
       if (!empty($matches)) { 
        // This gives an iframe link 
        $link = wp_oembed_get('https://www.youtube.com/watch?v=' . $matches[0]); 

        // main-img-a is for a local old lightbox lib that came with a plugin, no docs or link known 
        // All this code does is opens a larger image in a lightbox, no video 
        echo '<a class="main-img-a" href="http://i1.ytimg.com/vi/' . $matches[0] . '/sddefault.jpg">'; 
        echo '<img id="wdm_youtube_image" src="http://i1.ytimg.com/vi/' . $matches[0] . '/hqdefault.jpg" />'; 
        echo '</a>'; 
       } 
      }

來源

2016-08-01 Peter Bushnell

你可以發佈你試圖達到這個目標的代碼嗎？ – adi

我已更新，但我覺得它阻礙，而不是幫助。我無法使用已安裝的代碼與安裝的LightBox庫一起工作，並希望獲得有關如何獲取以及如何使用更新的LightBox庫的建議。 –

它可以與BOOTSTRAP modal和iframe輕鬆完成代碼的請求。但是下面的代碼在你的插件文件中。

<div id="VideoModal" class="modal fade"> 
    <div class="modal-dialog modal-lg video-modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     </div> 
    <div class="modal-body"> 
    <iframe src="" width="800" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    </div> 
</div>

然後在你的插件的腳本文件

$('.showVideoModal').click(function(e){ 
e.preventDefault(); 

var video_id = $(this).data("vimeo-id"); 
var video_width = $(this).data("vimeo-width"); 
var video_height = $(this).data("vimeo-height"); 


    $('#VideoModal').modal({show:true}); 

    $('#VideoModal iframe').attr("width",video_width); 
    $('#VideoModal iframe').attr("height",video_height); 
    var frameSrc = "https://player.vimeo.com/video/"+ video_id+"?autoplay=1&title=0&byline=0&portrait=0"; 
    $('#VideoModal iframe').attr("src",frameSrc); 
    }); 
    $('#VideoModal .close').on('click',function(){ 
    $('#VideoModal iframe').attr('src',''); 
    });

添加該jQuery函數彈出式窗口，彈出觸發器已準備就緒。讓我們得到發佈的縮略圖，並通過下面的代碼作爲彈出式觸發點。將這些行包含在同一個插件文件中。

希望這會有所幫助。

來源

2016-08-01 12:38:40 Palanivelrajan

在WordPress插件中的Lightbox中播放YouTube視頻

回答

相關問題