图片视频缩略图画廊问题：点击视频缩略图无法加载播放

问题背景 #

图片缩略图点击可正常打开，但视频缩略图点击后无法加载播放，对应HTML及JS代码如下：

HTML代码 #

<!-- PHOTO block -->
<article class="thumb">
    <a href="images/fulls/21.jpg" class="image">
        <img src="images/thumbs/21.jpg" class="image" alt="" />
    </a>
    <h2> Cmon mayne</h2>
    <p>Photoshoot with Myles Jay </p>
</article>

<!-- VIDEO block -->
<article class="thumb">                         
    <a href="images/fulls/16.mp4"  type="video/mp4" video     
         src="images/fulls/16.mp4" class="image">
        <img src="images/thumbs/ab22.jpg" class="image" alt="" />   
    </a>                                                                               
    <h2> Getting to the work</h2>                                
    <p>Photoshoot with Myself </p>
</article>

JavaScript代码 #

// Main.
var $main = $('#main');

// Thumbs.
$main.children('.thumb').each(function() {
    var $this = $(this),
        $image = $this.find('.image'), 
        $image_img = $image.children('img'),
        x;

    // No image? Bail.
    if ($image.length == 0)
        return;

    // Set background.
    $image.css('background-image', 'url(' + $image_img.attr('src') + ')');

    // Set background position.
    if (x = $image_img.data('position'))
        $image.css('background-position', x);
    
    // Hide original img.
    $image_img.hide();    
});

// Poptrox.
$main.poptrox({
    baseZIndex: 20000,
    caption: function($a) {
        var s = '';
        $a.nextAll().each(function() {
            s += this.outerHTML;
        });
        return s;
    },
    fadeSpeed: 300,
    onPopupClose: function() { $body.removeClass('modal-active'); },
    onPopupOpen: function() { $body.addClass('modal-active'); },
    overlayOpacity: 0,
    popupCloserText: '',
    popupHeight: 150,
    popupLoaderText: '',
    popupSpeed: 300,
    popupWidth: 150,
    selector: '.thumb > a.image',
    usePopupCaption: true,
    usePopupCloser: true,
    usePopupDefaultStyling: false,
    usePopupForceClose: true,
    usePopupLoader: true,
    usePopupNav: true,
    windowMargin: 50
});

// Hack: Set margins to 0 when 'xsmall' activates.
breakpoints.on('<=xsmall', function() {
    $main[0]._poptrox.windowMargin = 0;
});

breakpoints.on('>xsmall', function() {
    $main[0]._poptrox.windowMargin = 50;
});

})(jQuery);

问题原因 #

1. HTML中视频链接的a标签包含无效属性（video、src），这些属性不属于a标签标准属性，无法被识别。
2. Poptrox插件默认仅处理图片类型链接，会自动将链接转为img元素插入弹窗，但不会处理视频文件，导致视频无法加载播放。

解决方案 #

1. 修正HTML视频缩略图结构 #

移除a标签上的无效属性，可添加自定义类video-link方便后续区分视频链接：

<!-- 修改后的VIDEO block -->
<article class="thumb">                         
    <a href="images/fulls/16.mp4" class="image video-link">
        <img src="images/thumbs/ab22.jpg" class="image" alt="" />   
    </a>
    <h2> Getting to the work</h2>                                
    <p>Photoshoot with Myself </p>
</article>

2. 修改Poptrox配置，添加视频处理回调 #

在Poptrox的配置项中加入popupCallback，检测视频链接并替换弹窗内容为video元素：

$main.poptrox({
    baseZIndex: 20000,
    caption: function($a) {
        var s = '';
        $a.nextAll().each(function() {
            s += this.outerHTML;
        });
        return s;
    },
    fadeSpeed: 300,
    onPopupClose: function() { $body.removeClass('modal-active'); },
    onPopupOpen: function() { $body.addClass('modal-active'); },
    overlayOpacity: 0,
    popupCloserText: '',
    popupHeight: 150,
    popupLoaderText: '',
    popupSpeed: 300,
    popupWidth: 150,
    selector: '.thumb > a.image',
    usePopupCaption: true,
    usePopupCloser: true,
    usePopupDefaultStyling: false,
    usePopupForceClose: true,
    usePopupLoader: true,
    usePopupNav: true,
    windowMargin: 50,
    // 新增：处理视频链接的回调
    popupCallback: function($popup, $a) {
        // 匹配常见视频格式后缀
        var videoExtensions = /\.(mp4|webm|ogg)$/i;
        var href = $a.attr('href');
        
        if (videoExtensions.test(href)) {
            // 清空弹窗默认内容
            $popup.find('.poptrox-popup').empty();
            // 创建带控制栏的video元素
            var videoElement = $('<video controls></video>');
            videoElement.attr({
                'src': href,
                'type': `video/${href.split('.').pop().toLowerCase()}`
            });
            // 将video元素插入弹窗
            $popup.find('.poptrox-popup').append(videoElement);
            // 自动调整弹窗尺寸适配视频（可选）
            $popup.css({
                'width': 'auto',
                'height': 'auto'
            });
        }
    }
});

3. 可选：添加视频弹窗样式优化 #

在CSS中添加规则，确保视频在弹窗内自适应显示：

.poptrox-popup video {
    max-width: 100%;
    max-height: 80vh;
}

内容的提问来源于stack exchange，提问作者MimoDevelops