lima-city: Webhosting, Domains und Cloud
0 Pluspunkte 0 Minuspunkte

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?

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

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);
von  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Fragen und Antworten bewerten
  • Themen von Fragen bearbeiten
  • Fragen, Antworten und Kommentare bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft.

2.3k Fragen

2.8k Antworten

265 Kommentare

14 Nutzer