php - Play a YouTube video in Lightbox in WordPress plugin -

in wordpress plugin need lightbox style popup open , play youtube video. plugin has custom post type, users have provided youtube url saved post_meta.

i've got thumbnail of video , thought able create popup link oembed function did not help. not sure best way proceed here.

edit: code request comment

            // url of video             $wdm_youtube = get_post_meta($wdm_auction->id, 'wdm_youtube', true);             if ($wdm_youtube != '') {                 // 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)) {                     // gives iframe link                     $link = wp_oembed_get('https://www.youtube.com/watch?v=' . $matches[0]);                      // main-img-a local old lightbox lib came plugin, no docs or link known                     // code opens larger image in 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>';                 }             } 

it can done bootstrap modal , iframe. below code on plugin file.

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

then add jquery function in plugin's script file

$('.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','');   }); 

now popup , popup trigger ready. let post thumbnail , make popup trigger point below code. include lines in same plugin file.

<pre>     <a href="#" class="showvideomodal"><?php the_post_thumbnail();?></a> </pre> 

hope help.