Javascript 视频弹出内容-放大弹出

谁能帮我把视频和内容一起弹出。我已经在wordpress中创建了自定义字段，并在我的php页面中调用了这些字段，我还为弹出窗口添加了js代码，但这并没有达到预期效果。我需要在左边的视频和右弹出的内容。下面是我的代码。请帮我做这件事

<ul class="video-component">
    <?php foreach ( $video as $entry ) : ?>
        <li>
            <div class="video-item">
                <a
                    href="<?= $entry[ 'video_url' ]; ?>"
                    data-link="<?= $entry[ 'video_url' ]; ?>"
                    data-description="<?= $entry[ 'video_description' ]; ?>"
                    data-title="<?= $entry[ 'title' ]; ?>"
                    class="thumbnail-wrapper"
                >
                <img
                    src="<?= $entry[ 'thumb' ][ 'sizes' ][ 'thumbnail-grid-square' ]; ?>"
                    alt="<?= $entry[ 'thumb' ][ 'alt' ]; ?>"
                />

                <div class="desktop-title">
                   <?php if ( $entry[ 'title' ] ) : ?>
                      <p class="image-title">
                        <?= $entry[ 'title' ]; ?>
                      </p>
                   <?php endif; ?>
                </div>

                </a>
            </div>
            <div class="mobile-info">
                <?php if ( $entry[ 'title' ] ) : ?>
                    <h3>
                        <?= $entry[ 'title' ]; ?>
                    </h3>
                <?php endif; ?>
                <?php if ( $entry[ 'video_description' ] ) : ?>
                    <p class="description">
                        <?= $entry[ 'video_description' ]; ?>
                    </p>
                <?php endif; ?>
                <?php if ( $entry[ 'video_url' ] ) : ?>
                    <a href="<?= $entry[ 'video_url' ]; ?>" class="btn">Read more</a>
                <?php endif; ?>
            </div>
        </li>
    <?php endforeach; ?>

</ul>

//js code

const $ = require('jquery'); 
const x = require('magnific-popup');

export default function init() {

$('.video-component').magnificPopup({
    delegate:     '.thumbnail-wrapper',
    type:         'iframe',
    disableOn:    783,
    gallery:      {
        enabled: true
    },
    iframe:        {
        titleSrc: function (item) {
            let title       = item.el.attr('data-title'),
                description = item.el.attr('data-description'),
                link        = item.el.attr('data-link'),
                btnHtml     = '';

            return `<h3>${title}</h3><p>${description}</p>`;
        }
    },

    callbacks:    {
        beforeOpen:  function () {

            // just a hack that adds mfp-anim class to markup
            this.st.iframe.markup = this.st.iframe.markup.replace('mfp-figure', 'mfp-iframe-scaler mfp-with-anim');
            this.st.mainClass    = 'mfp-3d-unfold';
        },
        markupParse: function (template, values, item) {

            // Triggers each time when content of popup changes
            console.log('Parsing:', template, values, item);
        },
    },
    verticalFit:  true,
    removalDelay: 500,
    mainClass:    'mfp-3d-unfold'
});

//js代码
const$=require（'jquery'）；
常量x=需要（“放大弹出”）；
导出默认函数init（）{
$（'.video component'）。放大弹出窗口({
委托：'.thumbnail wrapper'，
键入：“iframe”，
电话：783，
画廊：{
已启用：true
},
iframe：{
标题RC：功能（项目）{
设title=item.el.attr（'data-title'），
description=item.el.attr（'data-description'），
link=item.el.attr（'data-link'），
btnHtml=''；
返回`${title}${description}
`；
}
},
回调：{
beforeOpen:函数（）{
//只是一个将mfp动画类添加到标记中的黑客
this.st.iframe.markup=this.st.iframe.markup.replace（'mfp-figure'，'mfp-iframe scaler mfp with anim'）；
this.st.mainClass='mfp-3d-unfold'；
},
markupParse：函数（模板、值、项）{
//每次弹出窗口内容更改时触发
log（'解析：'，模板，值，项）；
},
},
垂直拟合：正确，
移动延迟：500，
mainClass:“mfp-3d-unfold”
});

请阅读。您需要给我们一个比“不工作”更好的问题描述，否则我们首先不知道这里到底需要修复什么。请阅读。您需要给我们一个比“不工作”更好的问题描述，否则我们首先不知道这里到底需要修复什么。