在 WordPress 插件的 Lightbox 中播放 YouTube 视频答案

【问题标题】：Play a YouTube video in Lightbox in WordPress plugin在 WordPress 插件的 Lightbox 中播放 YouTube 视频
【发布时间】：2016-08-01 12:05:18
【问题描述】：

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

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

【问题讨论】：

你能贴出你尝试实现的代码吗？
我已经更新了，但我觉得它阻碍而不是帮助。我无法让 oembed 代码与安装的 LightBox 库一起使用，并且希望获得有关从何处获取以及如何使用更新的 LightBox 库的建议。

标签： php wordpress lightbox

【解决方案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>

希望这会有所帮助。

【讨论】：