Veja o resultado no JSFiddle, utilizando Javascript puro para manipular as propriedades CSS do elemento slide.
Note que a propriedade padding-bottom: 75%;
da classe slide foi removida, uma vez que as dimensões do slide são controladas por script.
Abaixo, segue o script que realiza a tarefa:
var slide = document.querySelector('.slide');
var aspectRatio = 720/540; // ou (4:3) proporção de aspecto do div .slide
function resize() {
// dimensões da janela disponíveis
var newHeight = document.documentElement.offsetHeight - 39; // 39 é o espaço ocupado pelo footer
var newWidth = 0.8 * (document.documentElement.offsetWidth); // largura disponível: 80% do documento
var newWidthToHeight = newWidth / newHeight;
// ajusta o div mantendo as proporções de aspecto definidas por aspectRatio
if (newWidthToHeight > aspectRatio) {
newWidth = newHeight * aspectRatio;
} else {
newHeight = newWidth / aspectRatio;
}
slide.style.width = newWidth + 'px';
slide.style.height = newHeight + 'px';
}
// efetua um redimensionamento inicial
resize();
// redimensiona o slide sempre que a janela for redimensionada
window.addEventListener('resize', resize, false);
// (!) utilize a função resize sempre que o div .slide sofrer alterações
Sempre que um elemento precisar ser redimensionado de acordo com uma proporção de aspecto("aspect ratio"- em inglês), pode-se utilizar uma estratégia semelhante.
Não sei se é possível conseguir os mesmos resultados através de CSS Media Queries
ou outra estratégia que utilize puramente CSS, mas caso seja possível prefira sempre o uso de CSS.