Tips for setting up iFrames in rooomEvents

Learn how to adjust iFrames in your rooomEvents CMS for perfect display results.

When adding an iFrame in your rooomEvents CMS, sometimes your iFrame gets cut off or doesn't display fully. Don't worry, with a simple trick, you can assign a fitting, responsive aspect ratio to each iFrame.

The solution: A <div>-container for your iFrame

To improve your iFrame's presentation, you should embed it within a <div>-container and assign a specific CSS class. This method allows the iFrame to dynamically adjust to different screen sizes and aspect ratios.

How to add the <div>-container

Choose one of the following <div>-containers, depending on the desired aspect ratio of your iFrame:

<!-- 21:9 Aspect Ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="your-url-here" frameborder="0"></iframe>
</div>

<!-- 16:9 Aspect Ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="your-url-here" frameborder="0"></iframe>
</div>

<!-- 4:3 Aspect Ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="your-url-here" frameborder="0"></iframe>
</div>

<!-- 1:1 Aspect Ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="your-url-here" frameborder="0"></iframe>
</div>

Replace "your-url-here" with the actual URL of your iFrame. This ensures your iFrame is optimally displayed in any scenario.