CODEWITHSUNDEEP
javascripthtmlcssiframe
Jeremy Levett
Jeremy Levett

Reputation: 947

iframe behaves like an image element in terms of aspect ratio and responsiveness

There are plenty solutions out there where the width is responsive and the iframe retains aspect ratio but i cannot find a solution that also incorporates iframe height aswell.

In regards to the above solutions out there, if the iframe solution has a parent div whose height can change, the solutions just cuts off the bottom of the iframe if the height is to small instead of being responsive.

I need a solution that applies to the the case when you have a changing height and width of a parent element that the iframe is in, for use across different devices and view port sizes.

The solution should allow the iframe to behave like a responsive image element, that retains aspect ratio when the size changes on both width and height.

Upvotes: 0

Views: 114

Answers (2)

Jeremy Levett
Jeremy Levett

Reputation: 947

I used the media query aspect ratio to get the desired result

Upvotes: 0

Connor
Connor

Reputation: 91

You can make your iframe responsive by utilising position: absolute; in the container, however you will need to ensure there is a set height on the container.

.container {
  position: relative;
  height: 500px;
  width: 100%;
}

.container iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Upvotes: 0

Related Questions