Iframe embed auto-sizing not working

Support
#1

how would I make the iframe auto-size, depending on the screen its on. I don’t want the scrolling bar along the side.

I have included this coding and it got rid of the scrolling but its still cutting off the bottom part of the California map a bit.

its the mobile version that really falls apart. :frowning:

raw content:

< div class="map-container">< iframe src="http://www.cannabisresearchconsultants.com/California Map/map/index.html" frameborder="0" scrolling="no">< /iframe>< /div>

customizer:

.map-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.map-container iframe, .map-container object, .map-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

how can I control the autosizing of this raw content?

#2

Hey @norml,

The Raw Content element spans the column width and it height follows the content height. With that said, it is your iframe that needs to be responsive. Also, the content in your iframe must be responsive. Please contact the source of the code you’re using to provide you a responsive version.

Making iframes responsive is not a feature offered in X except the Video element’s embed mode which makes embedded videos responsive. For other types, you need to code a responsive iframe yourself or have a developer code it for you. Here are some guides.


Thanks.

#3

the coding I am using is HTML5 php docs. (they are the map on the page)

I have tried all kinds of things with the iframe. and have tried to use the x video embed shortcode also. but that isn’t responsive either. :frowning:
how would you suggest I use this for HTML5 iframe?

its fine on the desktop but it keeps getting chopped off on mobile.

I have tried the information from the two links, but still something keeps breaking and the map keeps getting cut off or it has the space around the map but it isn’t responsive once I check on my mobile.
question - if I don’t want the overflow to be cut off, would I put 'visible"?

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

this is what I have now: raw content:

cornerstone builder: css:

.video-container {
    position: relative;
    padding-bottom: 75%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
#4

Hi there,

Please kindly consider that you can not force the content inside the iFrame be responsive. The code of the original page that you add to your iFrame should be a responsive one.

It does not matter which element you use in the Cornerstone, think of the iFrame as a window that shows the outside world, you can make the window small or big but you can not change whatever you see outside.

If you want to have the iFrame only to be responsive you can start your research here.

But as I mentioned you can not make the content inside the iFrame responsive.

Thank you for your understanding.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.