iFrames auf Content-Seiten

rooomEvents ermöglicht es, über das CMS iFrames zu Content-Seiten hinzuzufügen. In diesem Artikel erfährst du, wie du einem iFrame ein bestimmtes Seitenverhältnis zuweisen kannst.

Wenn du einen iFrame über das CMS zu einer Content-Seite hinzufügst, kann es passieren, dass er nicht vollständig oder abgeschnitten dargestellt wird. Um das zu verhindern, kannst du das einzuhaltende Seitenverhältnis deines iFrames direkt beim Hinzufügen definieren.

Dafür musst du einfach einen sogenannten <div>-Container um dein iFrame einfügen, in dem eine CSS-Klasse hinterlegt wird.

Du kannst einen der folgenden <div>-Container verwenden, je nachdem, welches Verhältnis du benötigst:

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

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

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

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