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>
Making an iFrame responsive - Post ID...
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
<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
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>
<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.