WordPressプラグインのライトボックスでYouTubeビデオを再生

Question

私のワードプレスプラグインでは、YouTube動画を開いて再生するためにLightBoxスタイルのポップアップが必要です。プラグインにはカスタム投稿タイプがあり、ユーザーは既にpost_metaとして保存されているYouTube URLを提供しています。

私はビデオのサムネイルを持っていて、oembed関数でポップアップリンクを作成できると思っていましたが、明らかにそれは役に立たなかったと思います。進むべき最善の方法がここから来ているかどうかはわかりません。

EDIT：それは簡単にBOOTSTRAP modalとiframeで行うことができますコメント

  // 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>'; 
       } 
      } 

Answer 1

によってコード要求。しかしこれはあなたのプラグインファイルのコードです。

<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の機能を追加します。ポストサムネイルを取得し、ポップアップトリガポイントとして以下のコードで作成します。同じプラグインファイルにこの行を含めます。

​​

希望すると、これが役立ちます。