ACF + Elementor 实现 Loop Item YouTube 视频弹窗（无需 Elementor Popup）

在开发 WordPress 企业主题时，经常会遇到这样的需求：在 Elementor Loop Item 中展示产品、案例或解决方案列表，点击播放按钮或整个卡片后，弹出一个窗口播放对应的 YouTube 视频。

很多人会选择使用 Elementor Popup，但对于 Loop Item 来说，配置相对繁琐，而且后期维护成本较高。

本文分享一套我在开发主题时使用的方案，仅依赖 Elementor + ACF + JavaScript，无需开发自定义 Widget，也无需使用 Elementor Popup。

项目背景

例如一个视频列表：

点击：

整个卡片；
或播放按钮；

弹出一个 Modal，并自动播放当前产品对应的 YouTube 视频。

整个页面只存在一个视频弹窗。

为什么不用 data-video？

最理想的方式应该是：

<div class="hzt-video-container"
     data-video="https://youtu.be/xxxx">
</div>

JavaScript 直接读取：

container.dataset.video;

即可。

但目前 Elementor 传统 Container 的 Custom Attributes 不能直接绑定 ACF 动态字段，因此无法直接输出 data-video。

所以采用另一种更加兼容 Elementor 的方案。

实现思路

整个方案非常简单。

使用 ACF 创建 video_url 字段。
在 Loop Item 中添加一个 Heading Widget。
Heading 使用 ACF 动态字段输出 video_url。
将 Heading 的 HTML Tag 改成 div。
设置 display:none，仅作为数据中转。
JavaScript 读取视频地址。
创建 iframe 并播放视频。
关闭弹窗后删除 iframe。

ACF 字段

新增一个字段：

字段	类型
video_url	URL

填写：

https://youtu.be/xxxxxxxx

或者：

https://www.youtube.com/watch?v=xxxxxxxx

Elementor 配置

Container 添加类：

hzt-video-container

如果点击整个容器播放，再添加：

hzt-video-trigger

如果点击按钮播放，则给按钮添加：

hzt-video-trigger

然后新增一个 Heading Widget。

设置：

HTML Tag：

div

CSS Class：

hzt-video-url

内容：

动态标签：

ACF -> video_url

最后将 Heading 设置为隐藏即可。

HTML 结构

最终生成的 HTML 类似如下：

<div class="hzt-video-container">

    <img src="demo.jpg" alt="">

    <h3>Product Title</h3>

    <a class="hzt-video-trigger">
        ▶
    </a>

    <div class="hzt-video-url" style="display:none;">
        https://youtu.be/dQw4w9WgXcQ
    </div>

</div>

整个页面底部放置一个公共弹窗：

<div class="hzt-video-modal">

    <div class="hzt-video-wrapper">

        <span class="hzt-video-close">&times;</span>

        <div class="hzt-video-content"></div>

    </div>

</div>

CSS

.hzt-video-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.hzt-video-wrapper{
    position:relative;
    width:90%;
    max-width:900px;
}

.hzt-video-content iframe{
    width:100%;
    aspect-ratio:16 / 9;
    border:0;
}

.hzt-video-close{
    position:absolute;
    right:-15px;
    top:-15px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff;
    text-align:center;
    line-height:36px;
    cursor:pointer;
    font-size:20px;
}

JavaScript

jQuery(function ($) {

    function getYoutubeEmbed(url) {

        if (!url) return '';

        let id = '';

        if (url.indexOf('youtu.be/') !== -1) {
            id = url.split('youtu.be/').split('?');
        } else if (url.indexOf('watch?v=') !== -1) {
            id = url.split('watch?v=').split('&');
        }

        return id
            ? 'https://www.youtube.com/embed/' + id + '?autoplay=1&rel=0'
            : '';
    }

    $(document).on('click', '.hzt-video-trigger', function (e) {

        e.preventDefault();

        const container = $(this).closest('.hzt-video-container');

        const url = $.trim(
            container.find('.hzt-video-url').text()
        );

        if (!url) {
            return;
        }

        const embed = getYoutubeEmbed(url);

        if (!embed) {
            return;
        }

        $('.hzt-video-content').html(
            '<iframe src="' + embed + '" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
        );

        $('.hzt-video-modal').css('display', 'flex');

    });

    function closeVideo() {

        $('.hzt-video-content').empty();

        $('.hzt-video-modal').hide();

    }

    $(document).on('click', '.hzt-video-close', function () {

        closeVideo();

    });

    $(document).on('click', '.hzt-video-modal', function (e) {

        if (e.target === this) {

            closeVideo();

        }

    });

});