Made in Chicago Company Directory

jonwatson87
(@jonwatson87)

7 years, 5 months ago
First of all: AWESOME plugin! I didn’t know I needed this so badly until I found out it existed. My client is thrilled to be able to play media features directly from the post grid.

However, this is where issues also come into play.

Facebook video oembeds, introduced in WordPress 4.7 (which came out at about the same time this plugin was last updated, but wasn’t mentioned in your release notes…?) feck things up.

Using a standard post grid, the Facebook videos don’t show up at all. You simply get the video title and its post date.

Easy fix. I use the shortcode instead, which does work.

BUT… it also breaks the entire post grid…

The nice, tidy, responsive, auto-sized videos I had using YouTube videos are replaced with monstrous videos that expand outside their container.

The nice, tidy masonry grid breaks, and instead of nicely lined up posts with nice spacing I get Facebook videos loading after everything else on the page, and thus inevitable div overlap.

My nice tidy, featured video grid breaks completely any time a Facebook video is used as the Featured Video.

Any ideas? Or might this be something you’re looking into for a future update?

Many thanks,
Jon
- This topic was modified 7 years, 5 months ago by jonwatson87.
- This topic was modified 7 years, 5 months ago by jonwatson87. Reason: Edit image source code
- This topic was modified 7 years, 5 months ago by jonwatson87. Reason: Replaced screenshots

Viewing 3 replies - 1 through 3 (of 3 total)

eugenealegiojo
(@eugenealegiojo)

7 years, 5 months ago
Hi,

I played around with this issue and it seems it would be fixed with the following scripts:
```
(function($){
    
    $(window).on('load', function() {
       setTimeout( onVideoRendered, 1 );
    });
    
    var onVideoRendered = function() {
        var fbVideoState = $('.fb-video').attr('fb-xfbml-state');
        
        if ( 'rendered' == fbVideoState ) {
            $('.post-grid').masonry('layout');
    	} else {
	    // If not ready check again by timeout..
	    setTimeout( function() {
		 onVideoRendered();
	    }, 350 );
	}
    }
	
})(jQuery);
```
Feel free to change any from the above that are applicable to your template.
- This reply was modified 7 years, 5 months ago by eugenealegiojo.
- This reply was modified 7 years, 5 months ago by eugenealegiojo.
Thread Starter jonwatson87
(@jonwatson87)

7 years, 5 months ago
This is awesome, thanks @eugenealegiojo! You rock! 😀

Using this code worked for me, as I’m using Beaver Builder:
```
(function($){
    
    $(window).on('load', function() {
       setTimeout( onVideoRendered, 1 );
    });
    
    var onVideoRendered = function() {
        var fbVideoState = $('.fb-video').attr('fb-xfbml-state');
        
		if ( 'rendered' == fbVideoState ) {
		    $('.fl-post-grid').masonry('layout');
    	} else {
			// If not ready check again by timeout..
			setTimeout( function() {
				onVideoRendered();
			}, 350 );
		}
	}
	
})(jQuery);
```
Fixes the masonry height calculation a treat!

Still having a problem with the video width overflowing the post container, though.

Whatever the Facebook Video breaks in the post grid isn’t entirely addressed by the height calculation.

Any thoughts?
Thread Starter jonwatson87
(@jonwatson87)

7 years, 5 months ago
CSS adjustments like:
```
width: 100%;
height: 100%;
```
do work, but aren’t perfect. They cut off a small portion of the bottom of the image, and you’re left with black bars right and left when playing the video.

Transform also isn’t really a fix:

transform: scale(1.12, 1);

because it stretches the video to force it reach the edges, distorting the image, making everything wider than it should be.

Note that this only happens when Facebook videos are added. Resizing works flawlessly when it’s just YouTube videos. But the minute you add a Facebook video to the mix it breaks everything.

I don’t know if this is a BB Post Grid issue, a Featured Video Plus issue or a combination of the two, but I’m still looking for a better solution that “fixes” the Facebook video issue.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Facebook video issues’ is closed to new replies.