iFrames on content pages

Have more questions? Submit a request

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.

 

mceclip1.png

 

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>
Was this article helpful?
0 out of 0 found this helpful
Share

Comments

1 comment

Please sign in to leave a comment.