undefined ‘className’ in magnificPopup

I’m trying to reproduce this gallery https://codepen.io/mattlansom/pen/epRNpp

I kind of did everything exactly the same, but I get an error

“Uncaught TypeError: Cannot read properties of undefined (reading ‘className’)”

And I can’t figure out what the problem is

I need to manually declare these variables myself, or is it somewhere an error with connecting magnificPopup?

$(document).ready(function() {
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
    callbacks: {
      elementParse: function(item) {
        if(item.el.context.className == 'video') {
          item.type = 'iframe',
          item.iframe = {
             patterns: {
               youtube: {
                 index: 'youtube.com/',
                 id: 'v=',
                 src: '//www.youtube.com/embed/%id%?autoplay=1'
               },
               vimeo: {
                 index: 'vimeo.com/',
                 id: '/',
                 src: '//player.vimeo.com/video/%id%?autoplay=1'
               },
               gmaps: {
                 index: '//maps.google.',
                 src: '%id%&output=embed'
               }
             }
          }
        } else {
           item.type = 'image',
           item.tLoading = 'Loading image #%curr%...',
           item.mainClass = 'mfp-img-mobile',
           item.image = {
             tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
           }
        }

      }
    },
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1]
        }
    });
});
.popup-gallery a {display:inline-block;width:25%;}
.popup-gallery a img {height:auto;width:100%;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" integrity="sha512-WEQNv9d3+sqyHjrqUZobDhFARZDko2wpWdfcpv44lsypsSuMO0kHGd3MQ8rrsBn/Qa39VojphdU6CMkpJUmDVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div class="row">
      <div class="col-sm-12">
        <div class="popup-gallery">
            <a href="http://sandbox.vciwork.com/codepenstuff/images/1.jpg" class="image" title="Some Text for the image">
              <img src="http://sandbox.vciwork.com/codepenstuff/images/1.jpg" alt="Alt text" />
            </a>
          <a href="https://www.youtube.com/watch?v=L0jQz6jqQS0" class="video" title="This is a video">
              <img src="http://sandbox.vciwork.com/codepenstuff/images/2.jpg" alt="Alt text" />
            </a>
          <a href="http://sandbox.vciwork.com/codepenstuff/images/4.jpg" class="image" title="Some Text for the image">
              <img src="http://sandbox.vciwork.com/codepenstuff/images/4.jpg" alt="Alt text" />
            </a>
        </div>
      </div>
    </div>