Question

在我的WordPress插件中，我需要一个LightBox风格的弹出窗口来打开和播放YouTube视频。该插件具有自定义帖子类型，用户已经提供了一个YouTube网址，该网址保存为post_meta。

我有一个视频的缩略图，并认为我可以创建一个带有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>';
                }
            }

Answer 1

可以使用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>

然后在插件的脚本文件中添加此jquery函数

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

现在弹出窗口和弹出窗口已准备就绪。让我们得到帖子缩略图，并通过下面的代码将其作为弹出触发点。在同一个插件文件中包含此行。

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

希望这会有所帮助。

在WordPress插件中使用Lightbox播放YouTube视频

1 个答案: