- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
If you paste the code you're currently using, maybe our Community members will have some ideas.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Changing the width in my iframe from pixels to 100% did the trick. The iframe works on both desktop and mobile. Thank you!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Thanks for sharing, @Paul_C!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Where do you put it in the css file?
Thanks
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
<iframe id="FormsContentDomID" src="https://my.serviceautopilot.com/viewform.html?rk=b892ae3b-3411-40dc-bf9f-2fd046c421f1&Type=new" width="100%"height="1528"scrolling="no" frameborder="0" style="overflow-y:visible;"></iframe>
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report