Portrait videos overlapping

[g-rom87]

Hello,

I'm using this great tool for a few years now but there's still one issue bothering me. I am mixing photos with sometimes mp4 movies, which I display as html5. At the end of the code, when all images are loaded, I run the masonry script, to avoid overlapping images.

$(document).ready(function () {
  var imagesLoaded = 0
  var totalImages = $("img").length
  $("img").each(function (idx, img) {
    $("<img>").on("load", imageLoaded).attr("src", $(img).attr("src"))
  })
  function imageLoaded() {
    imagesLoaded++
    $('.grid').masonry({
      itemSelector: '.grid-item',
      //columnWidth: '.grid-item',
      percentPosition: true
    });
  }
})

This works great but not for movies... It gets really bad, when movies are in portrait mode because by default, it assumes a 16:9 format. You then have 2/3 of the movie hidden behind other items. To fix this, you have to rotate the phone or change the browser zoom level on desktop because masonry then knows the size of the movie and changes the layout.

Is there a way to avoid this already on load, maybe by doing something similar like I do with the document ready for photos?

Thank you :-)

PS: I can post a live link if needed but it's hosted on a NAS at home which is not powered on all the time and the firewall only allows certain countries (can change that if needed).