HTML5 Video - Overlapping

[josefarrugia]

Hi there,

I have tried the following solution – https://github.com/desandro/masonry/issues/964, however, it doesn't seem to be working. Here's a snippet of my code:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item'
});

$grid.on( 'load loadeddata', function() {
  $grid.masonry('layout');
});

Any ideas how to get it to trigger?

[desandro]

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[DarktimeGH]

For Videos I have found that video controls poster="YourPosterName.jpg" works for me on Vivaldi, IE and Edge but not Firefox

[edap]

I have the same issue, I was not able to solve it with the load loadedata callback, it was never called. What did the trick for me was:

document.querySelectorAll('video').forEach(vid => 
  vid.addEventListener('loadeddata', (event) => {
    $grid.masonry('layout');
  })
)

And, thank you David for keeping this library up-to-date through all these years ;)

[mbilal51]

I have the same issue, I was not able to solve it with the load loadedata callback, it was never called. What did the trick for me was:

document.querySelectorAll('video').forEach(vid => 
  vid.addEventListener('loadeddata', (event) => {
    $grid.masonry('layout');
  })
)

And, thank you David for keeping this library up-to-date through all these years ;)

i get overlap in firefox on first load and a few times on chrome as well.

Here is the snippet of my code

<script>
    var grid = document.querySelector('.grid');

var msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 10,
});

imagesLoaded( grid ).on( 'progress', function() {

  msnry.layout();
});
document.querySelectorAll('video').forEach(vid =>
  vid.addEventListener('loadeddata', (event) => {
    $grid.masonry('layout');
  })
)
</script>

<script>
    baguetteBox.run('.grid');
</script>

@edap @desandro Could you help?

[Paper-Folding]

I found another unbelievable way to solve this, just wrap every <video></video> tag with a <img></img> tag like this:

<img>
    <video src="balabala">
    </video>
</img>

Note that you should not add any attribute (like src) to img tag here. It actually does the trick to me...