Is it possible to dynamically resize a SharePoint 2013 web part height based on its width?

Question

I have a 16:9 HTML slideshow that I'm displaying in a Page Viewer web part. The web part is in a web part zone that dynamically resizes with the browser window. Below that Page Viewer web part, we have another web part that needs to stay right under page viewer without extra white space.

If I use the page viewer's default web part settings, the page getting displayed gets cut off vertically. If i set a height, then the height settings are only valid for a specific web part width.

Is there any way I can set the height of the page viewer web part to dynamically resize along with the width in order to keep the 16:9 ratio?

Answer 1

I don't believe this is possible with out of the box SharePoint webpart interface. However, it should be pretty easy using JQuery. I pulled an example script from: https://stackoverflow.com/questions/23463443/auto-resize-div-height-based-on-window-width

I tried changing the script I borrowed from the referenced script to match your use case, but I haven't attempted to run it, so you will need to debug.

function changeHeight() {
    var width = $("myPageViewerDiv").width();
    var newHeight = width / 16 * 9;
    $("myPageViewerDiv").css({
        "height": newHeight
    });
}
window.addEventListener('resize', changeHeight);
changeHeight();

Answer 2

Try this. JavaScript takes time to effect. I think this is best solution above all. For Fixed custom footer you can use this.

#s4-workspace 
  {height: calc(100vh - 125px) !important;}