Doesn't work with Video Embed Field

thanks for getting back for this so quickly and looking into it! VEF 8.2.x is needed for Media in Core, so no way around using that for me.

I tried your suggestion and changed the respective function conditions in the blazy module, but unfortunately, this seems not to be enough to make it work again.

But looking at the rendered HTML, I discovered something revealing... It seems there is an error in the JS that is calculating the padding-bottom on the element:

<div class="media media--pswp media--switch media--player media--ratio media--ratio--fluid media--player--on " style="padding-bottom: NaN%">
<img src="http://media.xxx.wod.by/sites/default/files/styles/large/public/video_thumbnails/nhS71NrmfTw.jpg?itok=dKlus4J7" class="media__image media__element pswp__img" alt="null">
<span class="media__icon media__icon--close"></span>
<span class="media__icon media__icon--play" data-url="https://www.youtube.com/embed/nhS71NrmfTw?start=0&amp;rel=0&amp;autoplay=1"></span>
</div>

If I replace the value inline to the height of the preview-thumbnail, I'm actually seeing the video and can play it. Will have to look further into the JS so see if I'm able to solve this myself.

on further inspection, I'm getting the following JS-Error that's also pointing to the problem calculating the size of the video object:

Uncaught ReferenceError: item is not defined at Function.a.theme.blazyPhotoSwipeMedia

This is the code the error is referring to in js/blazy.photoswipe.min.js:

return j='<div class="pswp__item--html media-wrapper" style="width:'+item.w+'px">',j+='<div class="media media--pswp media--switch'+i+' media--ratio media--ratio--fluid" style="padding-bottom: '+pad+'%">',

and this is the corresponding function in js/blazy.photoswipe.js, line 233:

 /**
   * Theme function for a blazy PhotoSwipe video.
   *
   * @param {Object} settings
   *   An object with the following keys:
   * @param {Array} settings.item
   *   The array of item properties containing: el, w, h.
   *
   * @return {HTMLElement}
   *   Returns a HTMLElement object.
   */
  Drupal.theme.blazyPhotoSwipeMedia = function (settings) {
    var item = settings.item;
    var elm = item.el;
    var alt = elm.querySelector('img') !== null ? elm.querySelector('img').getAttribute('alt') : '';
    var pad = Math.round(((item.h / item.w) * 100), 2);
    var boxUrl = elm.getAttribute('data-box-url');
    var embedUrl = elm.getAttribute('href');
    var player = item.type === 'video' ? ' media--player' : '';
    var html;

    html = '<div class="pswp__item--html media-wrapper" style="width:' + item.w + 'px">';
    html += '<div class="media media--pswp media--switch' + player + ' media--ratio media--ratio--fluid" style="padding-bottom: ' + pad + '%">';

    if (item.type === 'video') {
      html += '<img src="' + boxUrl + '" class="media__image media__element pswp__img" alt="' + Drupal.t(alt) + '"/>';
      html += '<span class="media__icon media__icon--close"></span>';
      html += '<span class="media__icon media__icon--play" data-url="' + embedUrl + '"></span>';
    }

    html += '<iframe src="about:blank" data-src="' + embedUrl + '" width="' + item.w + '" height="' + item.h + '" class="b-lazy media__iframe media__element" allowfullscreen></iframe>';
    html += '</div></div>';

    return html;
  };

Now I have no idea why item is not defined, so I would hope someone with more JS knowledge could have a look at this and help me out.