Video hover JQuery condition - check if source is video

Question

I'm using this awesome code by a couple of great dudes (acknowledgements in the code) to load some content when a user hovers a link.

What I have works a treat but it's designed only for images at the mo, so what I'm trying to do is extend it to video as well.

Full disclosure, I'm not a developer or programmer. I'm an early 2000s coder who used to make websites with <table>s.

I've hacked together what I think it should be like with a bit of research but I've come here to see if someone could lend their expertise to polish it up.

What I've done is add a couple of conditions: 'if' the source equals a video then add the <video> code, 'else' do what it was doing before which is use <img>.

The bit I need the most help with is how to determine that the source 'this.rel' is a video for the first condition. My thoughts were checking if the source ended in '.mp4'. I have no idea if this is the right approach though.

Thoughts and help much appreciated.

(function($) {
/*
 * Url preview script 
 * powered by jQuery (https://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * edited by Daan van der Zwaag (https://dvdz.design)
 *
 */


function previewImages() {
  /* CONFIG */

  xOffset = 100;
  yOffset = 80;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

  /* END CONFIG */

  $("a.screenshot").hover(function(e) {

      var $this = $(this); // caching $(this)

      $this.data('initialText', $this.text());

      $ if ( The file is an mp4 ) {
        $("body").append("<div id='previewImage'><video width='600' height='600' autoplay>" + "<source src='" + this.rel + "' type='video/mp4' />" + "Time to get a better browser dude, this one doesn't support video. Crazy." + "</video>" + "</div>")
      },

      $ else {
       $("body").append("<div id='previewImage'><img src='" + this.rel + "' alt='Link preview image' />" + "</div>")
      },

      $("#previewImage")
       .css("top", (e.pageY - xOffset) + "px")
       .css("left", (e.pageX + yOffset) + "px")
       .fadeIn("3000,swing")
       .css("z-index", "3");
    },
    function() {

      var $this = $(this); // caching $(this)
      $this.text($this.data('initialText'));

      $("#previewImage").remove();
    });

$("a.screenshot").mousemove(function(e) {

    $("#previewImage")
      .css("top", (e.pageY - xOffset) + "px")
      .css("left", (e.pageX + yOffset) + "px");

  });
};

  previewImages();
})( jQuery );