Tipps zum einstellen von iFrames in rooomEvents

Entdecke, wie du iFrames in deinem rooomEvents CMS anpasst, um perfekte Anzeigeergebnisse zu erzielen.

Du möchtest in deinem CMS einen iFrame hinzufügen, doch manchmal wird dein iFrame abgeschnitten oder nicht vollständig angezeigt. Keine Sorge, mit einem kleinen Trick kannst du jedem iFrame ein passendes, responsives Seitenverhältnis zuweisen.

Die Lösung: Ein <div>-Container für dein iFrame

Um die Darstellung deines iFrames zu verbessern, solltest du ihn in einen <div>-Container einbetten und eine spezielle CSS-Klasse zuweisen. Diese Methode ermöglicht es dem iFrame, sich dynamisch an verschiedene Bildschirmgrößen und -verhältnisse anzupassen.

So fügst du den <div>-Container hinzu

Wähle einen der folgenden <div>-Container, abhängig vom gewünschten Seitenverhältnis deines iFrames:

<!-- 21:9 Seitenverhältnis -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="deine-url-hier" frameborder="0"></iframe>
</div>

<!-- 16:9 Seitenverhältnis -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="deine-url-hier" frameborder="0"></iframe>
</div>

<!-- 4:3 Seitenverhältnis -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="deine-url-hier" frameborder="0"></iframe>
</div>

<!-- 1:1 Seitenverhältnis -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="deine-url-hier" frameborder="0"></iframe>
</div>

Ersetze "deine-url-hier" durch die tatsächliche URL deines iFrames. So sorgst du dafür, dass dein iFrame in jedem Szenario optimal dargestellt wird.