Iframe responsive. It's possible?

[betisimo76]

Hello everybody s;

 

I have a problem with iframes and do not know how to fix it. I tell you what happens to me.

 

My idea is to load an iframe from a CMS product that I've created. For this I use Iframes activated in PS. I have also changed as indicated Vekia tinyMCE editor to make it a rich text editor, and thus, accept labels such as <style>.

 

Well, I have the iframe that is responsive and therefore does not look the same on desktop, tablet or in the mobile. On the desktop has a height, for example, 700px (say for example because the input load 700px but it has a contact form that reaches the bottom of the page, and if you hit the send button without having completed, tells you, below each field, which is what you are missing. Therefore the product can be 800px high)

 

When tablets burden height also varies, and when charging for mobile phone, this practically everything changed and the height can be up to 2000px.

 

The iframe width accepts the percentage value -> "100%" but not the height, which by default is "150". If I change to "100%" and keep, automatically removing the percentage. I have also tried to put "100em" I had read that worked, but not with these.

 

It gives the height iframes problems, I read everything, but not like giving a height that automatically fits all resolutions.

 

I show as I have so far, but I say, with this, I make a point that does not fit the screen. You will see that I used media queries as a last resort but neither are perfect now, and even more, depending on the device that you see ....

 

<style> <! - This is to make it look framed in iPhones, which if not out of adjustment.
iframe {
  min-width: 100%;
  width: 100px;
  * width: 100%;
  min-height: 100%;
  * height: 100%;
}
media (min-width: 992px) and (max-width: 1199px) {
.test {
  min-height: 500px! important;
}
}
media only screen and (max-width: 991px) {
.test {
  height: 1740px! important;
}
}
media only screen and (max-width: 767px) {
.test {
  height: 1740px! important;
}
}
media only screen and (max-width: 480px) {
.test {
  height: 1580px! important;
}
}
media only screen and (max-width: 320px) {
.video{
  height: 1500px! important;
}
}
-> </style>
<div class ="test"><iframe width = "100%" height = "700" id = "test" src = "https://mi-dominio.com" frameborder = "0" scrolling = "no"> </ iframe></ div>

 

 

 

Someone can help me out ??

 

Thank you!!

 

PS: First of all say that use version 1.6.0.9

 

[cybergoofy]

Hi betisimo76,

 

I´m trying to get the cms iframe repsonsive, too.

if you succeed getting javascipt working within your CMS side, this code can help you:

$(function(){
$(window).on('load resize', adjustIframe);
});

function adjustIframe() {
$(parent.document.getElementById("responsive-iframe")).css("height", $("html").css("height"));
}

[betisimo76]

Hi cybergoofy

 

Thanks for your answer, but that's not works fine.

 

The code is accepted by my tinyMCE but the result is a that iframe is showed but below it, I found a very big White space until found the footer of the web. This happens in desktop, tablets and mobiles.

 

Thanks again.

 

I follow finding a solution...

[spreekaffee]

Hello,

I'm also looking for a way to have an iframe with a height of 100%. Does anyone have a solution for that by now?

Best regards

spreekaffee