Making an iFrame responsive - Post ID...

User 498353 Photo


Registered User
21 posts

How can I make the contents of an iFrame responsive in Site Designer V4? Here's the page that I need to be responsive: http://www.homelaunch.net - the iFrame is: <iframe src="https://southtexas.lpages.co/23127-airedale-ln-home-launch-1112009-100-pm/" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="1200px" width="600px" allowfullscreen></iframe>

User 379556 Photo


Registered User
1,535 posts

In SD I create iframes within an HTML element, giving the iframe a width and height of 100%, e.g.

<iframe name="ref"
src="https://southtexas.lpages.co/23127-airedale-ln-home-launch-1112009-100-pm/"
style="
width:100%;
height:100%;
border:none;">
</iframe>

I then do other styling on the HTML element itself of width and height by percentage or vertical widths, e.g.
width 100vw, height 200vw. I attach an example as above.

Frank
Attachments:
User 2719045 Photo


Registered User
48 posts

Try this in an HTML element:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://southtexas.lpages.co/23127-airedale-ln-home-launch-1112009-100-pm/' style='border:0px #ffffff none;' name='myiFrame' scrolling='no' frameborder='1' marginheight='0px' marginwidth='0px' height='1200px' width='600px' allowfullscreen></iframe></div>

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.