Opening Video Thumbnail - video will open but will not load - html

Question

For context, this is just a website that displays a thumbnail gallery linking to larger photos/videos.
When the thumbnails of photos are opened there is no problem. The thumbnails with a video attached to them look identical to the photo thumbnail only until the video thumbnail is clicked and the video will not load. Reference the HTML(first block) & javascript(second block) code below, any help would be greatly appreciated, this is my own personal project and I have been stuck for a couple days lol. if there any other information required, please do not hesitate to ask
This what happens when the thumbnail with the video is clicked but the video DOES NOT PLAY :(
<!-- code below is the PHOTO block of code ! -->
<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>
<!-- code below is the VIDEO block of code ! -->
<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>
// 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" <span> to the image pointed to by its child
// <img> (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 = 0;
});
breakpoints.on('>xsmall', function() {
$main[0]._poptrox.windowMargin = 50;
});
})(jQuery);
I have searched every stackoverflow method mentioning a thumbnail and video, I am honestly stuck. I have been playing around with the tags and attributes but I have seem to be getting no where.

Answer 1

Try setting up your <article> as:
<article class="thumb">
<a href="images/fulls/16.mp4">
<img src="images/thumbs/ab22.jpg" class="image" alt="" />
</a> <h2> Getting to the work</h2>
<p>Photoshoot with Myself </p>
</article>