Why is this iFrame not behaving responsively on IOS? - ios

Question

I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.

Answer 1

Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}