在 Elementor 动态标签引用的Lightbox灯箱视频添加播放控制器

通常在我们做网页搭建的时候，为了做一些图片的效果，可能会直接用到图片或者整块容器使用链接引用Lightbox灯箱弹出视频。

本文主要介绍了如何实现点击容器或者图片弹出视频，并且通过一段js代码为视频添加播放控制器。

第一步，我们先在图像或者容器中的自定义URL中，点击右侧动态标签，点击选择Lightbox。

第二步，再次点击lightbox灯箱设置，选择视频，填写自托管的视频链接。

这个时候就已经可以实现播放视频了，但是视频没有播放控制器，只能自动播放，如果我们想要添加播放控制器，按照以下步骤继续调整。

第三步，在高级设置中，设置好CSS类为”lightbox-video-trigger“。

第四步，在网页添加html小部件，复制粘贴以下代码：

<script>
    jQuery(document).ready(function ($) {
        // 为触发灯箱的按钮绑定点击事件
        $('.lightbox-video-trigger').click(function () {
            // 定时检查灯箱是否打开并加载了视频
            const interval = setInterval(function () {
                const lightboxVideo = $('#elementor-lightbox video');
                if (lightboxVideo.length) {
                    // 为视频添加 controls 属性
                    lightboxVideo.attr('controls', 'true');
                    console.log('Video controls added.');

                    // 停止定时器
                    clearInterval(interval);
                }
            }, 500); // 每 500 毫秒检查一次
        });
    });
</script>

完成以上步骤，保存预览就能看到底部出现播放控制器。