Make Embedded Listing Responsive - css

Question

I want to ask if it is possible to make the embedded airnbnb listing responsive? I am using this code for the sharing of listing:
<div class="airbnb-embed-frame" data-id="133213" data-view="home" data-hide-price="true" style="max-width:450px;width:100%;min-height:300px;height:100%;margin:auto;"><span>View On Airbnb</span>1 BR APT + 1 LIVING RM # SKYWALK CONDO (24th)<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script></div>
The container was responsive but the content of iframe is not. It only shows horizontal and vertical scroll.

Answer 1

I've found a workaround, not sure how well it holds up though.
Here's a codepen.
Basically, what I've done is calculate the scale by doing client width - 10 (for some margin on the right site) divided by the embedded div's width, then used that to transform it to the fitting size and set the origin to left in order to center it.
CSS:
.room-container {
display: flex;
flex-flow: row wrap;
}
.room {
width: 450px;
height: 300px;
margin: auto;
}
#media all and (max-width: 500px) {
.room-container {
flex-direction: column;
}
.room {
transform-origin: left;
}
}
JS:
(function () {
const resize = () => {
let rooms = document.getElementsByClassName('room');
for (let room of rooms) {
let scale = (window.innerWidth - 15) / room.offsetWidth;
room.style.transform = 'scale(' + scale + ')';
}
}
window.onload = () => resize();
window.onresize = () => resize();
})();

Answer 2

Thanks #AesopChris. I had some problems with responsiveness on Andoid devices, so I made few changes and it worked perfectly in WordPress and Elementor Page builder.
JS in Footer:
<script>
(function () {
const resize = () => {
let rooms = document.getElementsByClassName('airbnb-embed-frame');
for (let room of rooms) {
if ( window.innerWidth < 500 ) {
let scale = (screen.width - 20) / room.offsetWidth;
room.style.transform = 'scale(' + scale + ')';
} else {
room.style.transform = 'scale(1)';
}
}
}
window.onload = () => resize();
window.onresize = () => resize();
})();
</script>