iFrames on content pages

rooomEvents allows you to add iFrames to content pages via the CMS. In this article, you will learn how to assign a specific aspect ratio to the iFrames.

When you insert an iFrame on a content page via the CMS, the iFrame may not be fully displayed. To prevent this, you can set the aspect ratio of the iFrame right when you add it. 

To do so, you just need to add a <div> container around your iFrame that contains a class depending on the desired aspect ratio.

You can use the following <div> containers depending on the ratio you need:

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

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

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

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