javascript - 视频弹出内容 - 精彩的弹出

Question

谁能帮我制作视频和内容一起弹出。我在 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'
});

标签： javascriptphpcss