Aide CSS/JS pour avoir un ratio 16:9 sur DIV

Hello,

Je tente de faire une div qui garde un ratio de 16:9, aussi bien quand on modifie la largeur de la page que la hauteur!!

Et c'est bien la hauteur qui me pose problème. Avec toutes les méthodes CSS que j'ai trouvé sur Google, le ratio est bien respecté quand je modifie la largeur de ma fenêtre. Par contre quand je modifie la hauteur, le ratio n'est plus respecté.

Mon code : [URL visible pour les membres Pro]

Vous verrez que si vous réduisez la hauteur de la fenêtre au maximum, la largeur restera à 100% et le ratio ne sera donc plus respecté (la hauteur part en réalité en overflow). Je voudrais que la largeur diminue plutôt que d'avoir une hauteur en overflow.

Ce que j'ai actuellement : [URL visible pour les membres Pro]
Ce à quoi j'essaye d'arriver : [URL visible pour les membres Pro]

Merci pour vos offres