Открытие миниатюры видео: видео откроется, но не загрузится. ⇐ Html

[Anonymous]

Для контекста: это просто веб-сайт, на котором отображается галерея миниатюр со ссылками на фотографии/видео большего размера.
Когда миниатюры фотографий открываются, проблем не возникает. Миниатюры с прикрепленным к ним видео выглядят идентично миниатюре фотографии только до тех пор, пока не будет нажата миниатюра видео и видео не загрузится. См. приведенный ниже код HTML (первый блок) и javascript (второй блок), любая помощь будет принята с благодарностью, это мой личный проект, и я застрял на пару дней, лол. если требуется какая-либо другая информация, не стесняйтесь спрашивать.
Вот что происходит, когда щелкают по миниатюре с видео, но видео НЕ ВОИГРАЕТСЯ

Код: Выделить всё

[url=images/fulls/21.jpg]
[img]images/thumbs/21.jpg[/img]
[/url]
 Cmon mayne
Photoshoot with Myles Jay




[url=images/fulls/16.mp4]
[img]images/thumbs/ab22.jpg[/img]
[/url]                                                                                 Getting to the work
Photoshoot with Myself

Код: Выделить всё

// 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;

// Image.
// This sets the background of the "image"  to the image pointed to by its child
//  (which is then hidden). Gives us way more flexibility.

// 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 = 50;
});

})(jQuery);

Я просмотрел каждый метод stackoverflow, в котором упоминаются миниатюры и видео, и, честно говоря, я застрял. Я экспериментировал с тегами и атрибутами, но, похоже, ничего не добился.

Подробнее здесь: https://stackoverflow.com/questions/753 ... l-not-load