[Support request] Format Video

[Royal Rangers]

When I use a video format on archive page is bad formatting.

https://ctrlv.cz/jvOL
https://ctrlv.cz/LiLB

For example I try insert a Instagram post and problem is too.

How I can fix it?

[David]

Hi there,

try adding this CSS:

.masonry-container .post .wp-block-embed {
    min-height: 220px;
}

[Royal Rangers]

Hi David,
I add code to custom css.

In Opera/Chrome/Firefox:¨
https://ctrlv.cz/f1CK
https://ctrlv.cz/DRKo

Maybe is problem with Gutenberg embed block?

When I try resize browser window and back to fullscreen it work.

[David]

Try clearing your browser cache as its working for me.

The issue is that the Masonry option is calculating the height of the posts before the Embed has loaded.

[Royal Rangers]

I try in Chrome, Opera, Firefox, Edge and everywhere same. I try anonymous mode too and same.

chrome
firefox
edge

I try add Instagram post as postformat link
instagram

[Tom]

Hi there,

Can you try adding this as a Hook Element (https://docs.generatepress.com/article/hooks-element-overview/) in the wp_footer hook?:

<script>
    jQuery( window ).load( function() {
        var masonry = $( '.masonry-container' );

        if ( masonry ) {
            masonry.masonry( 'layout' );
        }
    } );
</script>

[Royal Rangers]

Hi Tom, I try this. Doesn´t work.

[Tom]

Is it still added to the site?

[Royal Rangers]

Yes

[Tom]

I’m not seeing it in the source code. Can you deactivate your caching/minifying plugin?

[Royal Rangers]

Plugin is deactivated.

[Tom]

Hmm, it’s like we need a trigger to fire once the videos are done loading so masonry reloads, but I’m not sure if that’s possible.

You may be stuck with regular columns if you’ll be loading videos like this, unfortunately.

[Royal Rangers]

I understand. Its surprised me because interesting function and doesnt work good for me.

[Tom]

I’ll look at the core code and see if there’s any way for me to make it aware of videos loading.

[Royal Rangers]

Thanks for your support!

[Author]

Posts