Youtube Video an Größe des umgebenden Div anpassen

Question

Ich habe in einem Div Container einen Youtube Iframe.

<div id="umgebendesDiv" class="video-container">
<iframe id="meinIframe" width="800px" height="600px" src="https://www.youtube.com/embed/__rqszvU0zI?si=vnLHsJVC0DgQCc_d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

Ich habe mit Mediaqueries verschiedene Styles eingebunden um die Größe des Div an den Browser des Benutzer anzupassen. Wie kann ich machen das das Video sich automatisch an die Größe des umgebenden Div anpasst?

Answer 1

Du kannst einen Javascript Eventhandler registrieren der die Größe beim Laden der Seite und wenn das Fenster vergrößert/verkleinert wird ausliest und den Iframe entsprechend anpasst..

function resizeDiv() {

    var umgebendesDiv = document.getElementById('umgebendesDiv');
    var meinIframe = document.getElementById('meinIframe');
    
    umgebendesDiv.style.position = 'relative';
    meinIframe.style.width = '100%';
    meinIframe.style.height = umgebendesDiv.clientHeight + 'px';

}

window.addEventListener('DOMContentLoaded', resizeDiv, false);
window.addEventListener('resize', resizeDiv, false);