Trying to build mobile responsive iframe

Jenelle_P · ‎05-25-2016

Hi guys, I'm having an issue where I'm trying to build in an iframe in my real estate website so that my visitors can search for properties through our region's property database. I've been able to get it to work on the desktop version of the site, but I can't seem to force Weebly to scale it on the mobile version.

I used the "insert HTML" function and inserted just a naked iframe code with the website and then played around with adding height and width values to the iframe, but nothing seemed to help on mobile. I tried fiddling around with the CSS but nothing I did there seemed to help either. Does anyone know how to build a mobile-responsive iframe in Weebly?

PeteyD1 · ‎05-26-2016

Hello @Jenelle_P !

You could perhaps set the iframe width to 100% so it will scale to whatever width the page size is on mobile devices. Following are several articles I found with a quick web search that may help, though they aren't specific to Weebly and they're not solutions directly endorsed by Weebly:

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

http://flwebsites.biz/posts/proportional-responsive-iframes-youtube-videos

http://stackoverflow.com/questions/17838607/making-an-iframe-responsive

http://jsfiddle.net/masau/7wrhm/

Hopefully those will help point you in the right direction, though it may take a bit of experimentation for you to get things exactly how you would like them to look. Best of luck to you and happy Weeblying!

12udy · ‎09-10-2016

I have tried all the solutions I could find through the above links. However, they only work when I resize the brower on my computer. When I check on the browser on my phone, the problems remain.

Adam7 · ‎09-11-2016

If you paste the code you're currently using, maybe our Community members will have some ideas.

bri0039 · ‎10-17-2016

Changing the width in my iframe from pixels to 100% did the trick. The iframe works on both desktop and mobile. Thank you!

Paul_C · ‎12-21-2016

For anybody still looking for a good solution for a 100% working responsive embedded iframe, Here is a solution i stumbled upon today

//HTML
<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe src="https://www.youtube.com/watch?v=KK9bwTlAvgo?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

//CSS
<style>
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

Ooriginal source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Have fun

Adam7 · ‎12-21-2016

Thanks for sharing, @Paul_C!

Paul_C · ‎12-21-2016

My pleasure

jacobnolt · ‎02-16-2017

Where do you put it in the css file?

Thanks

lgscott3 · ‎12-20-2017

Hello, I am also having trouble with resizing an iframe to be mobile responsive. Can you look at my code and tell me what I should change?

This is the website it is on. On the desktop it is fine, but on mobile it does not resize and cuts off part of the side and bottom of the form.

thanks.

JJ71 · ‎01-28-2022

My experience is Weebly takes that div and wraps in its own div and makes it not work. Weebly, please modify your code so iframes can be made responsive, or provide a free app that will do it. It is not right for us to have to change our theme and thereby have to rebuild our entire website to get this one simple thing to work, especially when now half of people or more are viewing websites on mobile phones.