Responsive iframes in Bricks

This Pro tutorial provides the steps to add responsive iFrames in Bricks.

Step 1

Edit your Page/Template with Bricks.

Add a Code element having this content:

<iframe src="https://bricksbuilder.io/" width="1600" height="900"></iframe>

Replace the value of src attribute with the URL of your webpage that should be shown in the iframe.

The width and height values only determine the aspect ratio of the iframe but won’t be the exact dimensions. The iframe will fit in (take up the width of) the Code element’s parent element.

At STYLE → CSS → CSS Classes, add this class: iframe-container

Step 2

Add this CSS in child theme‘s style.css:

:root {
  --aspect-ratio: 16/9;
}

.iframe-container {
  position: relative;
  width: 100%;
}

.iframe-container::before {
  content: "";
  display: block;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
}