Make Embedded Listing Responsive

user_7956604 0
Viewed 975

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;"><a href="https://www.airbnb.com/rooms/133213?s=51"><span>View On Airbnb</span></a><a href="https://www.airbnb.com/rooms/133213?s=51" rel="nofollow">1 BR APT + 1 LIVING RM @ SKYWALK CONDO (24th)</a><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.

responsive iframe css
1 Answers

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();
})();
user_67216210
Related