White Space Below Images

Hey,

The issue is between your theme and my plugin.

In the settings for the plugin, I believe you have the “large” size selected to have the embed large on the individual pages (612x710px).

Your theme has a global iframe attribute settings “max-width:100%” on all iframe on your site. This is create for responsive design, but it makes the iframe smaller in width, but it does not change the height. And that is why you get iframes that is still 710px height, while they have been scaled down to 333px in width.
However, resizing iframes height by css dynamically is not possible in the same way as width.

What I recommend is adding a small Javascript snippet that scales the iframes on both height and width, keeping its ratio.

Below is a small example for jQuery for your site. Might need some modifications, but in short, it finds all iframes on the homepage and set the hight correctly based on width and the ratio of the original iframe.

resizeIframes();

$(window).resize(function(){
    resizeIframes();
});

function resizeIframes() {

    var iframe = $('.home iframe');

    var iframeInitHeight = iframe.height();
    var iframeInitWidth = iframe.width();
    var iframeRatio = iframeInitHeight / iframeInitWidth;

    var columnWidth = $('.home .wf-container .wf-cell .blog-content').width();

    var iframeNewHeight = columnWidth * iframeRatio;

    iframe
        .attr('width', columnWidth+'px')
        .attr('height', iframeNewHeight+'px');

}