Well for all you beaver builders out there that need to add a responsive iframe into a beaver builder page then here you go, I hope this helps some people…
No more miss-sized iframes messing up your mobile pages etc…
add an html module to the page with your iframe :
<div class=‘responsiveIframe’ >
<iframe src=“https://www.google.com/maps/d/embed?mid=xxxxxxxxxxxxx” width=“100%” height=“450”></iframe>
</div>
Then add some css to your theme stylesheet or use code snippets or fresh custom code or your prefered method to inject some css to the page as follows… :
.responsiveIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch; //<<-- THIS IS THE TRICK…
border: solid black 1px;
}
.responsiveIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Bob’s your uncle, fanny’s your aunt and beaver builder is the business!
Enjoy…