how to simply open .mp4 video from same directory, not from youtube or vimeo?

[uliwest]

Hello,
I'm trying to figure out how to simply open a video in a popup, similar to how images open in a popup. This is my code for images, that works great:

Html:

<a class="image-popup-vertical-fit image-link" href="1.jpg" title=""><img src="1.jpg" width="100%"/></a>

JS:

$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}});});

For videos i currently use this code:

<video width="100%" autoplay loop muted>
<source src="1.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

I would like the video to open in a pop up when i click on it, same as the image does.

There are plenty of examples of how to open a video hosted on youtub or vimeo in a pop up. But I couldn't find a way to simply open a local video file.

I also tried what is posted here #626 but it didn't work for me, or I didn't understand how to use/modify the code for my purpose.

Thank you!

[uliwest]

i got it to work :)

html:

<a href="#video-popup-1" class="popup-video">
  <video width="100%" autoplay loop muted>
    <source src="1.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</a>

<div id="video-popup-1" class="mfp-hide">
  <video loop muted style="max-width: 100%; width: 100%;">
    <source src="1.mp4" type="video/mp4">
  </video>
</div>

js:

// Video popup
$('.popup-video').magnificPopup({
  type: 'inline',
  callbacks: {
    open: function() {
      // Pause the thumbnail video and play the popup video
      $('.popup-video video').each(function() { this.pause(); });
      this.content.find('video')[0].play();
    },
    close: function() {
      // Pause popup video and restart thumbnail videos
      this.content.find('video')[0].pause();
      $('.popup-video video').each(function() { this.play(); });
    }
  }
});