iFrame block not showing up in the iPhone

ios css iframe sass mendix
romil gaurav picture romil gaurav · Feb 4, 2018 · Viewed 9.3k times · Source

I have a hybrid mobile app in Mendix. In one page of the app, I am displaying some data with text and also video or website URL embedded.

<iframe id="quizWidget-454107" width="100%" height="900px" frameborder="0" border="none" src="https://www.qzzr.com/widget/quiz/fi9xdWl6emVzLzQ1NDEwNw"></iframe>

Here we are embedding this website, and we also embed youtube URL here.

The issue is, this embedded URL(video/website) shows up in a section on Android phone but not in iPhone. May be Safari does not render iFrame correctly.

Any idea what we can replace iFrame with?

Answer

connerc picture connerc · Feb 5, 2018

please see an answer to a related question here. I believe You need to add <meta> tags to your index.html page to allow the app to load external content, preferable using a Content Security Policy (CSP).

Related questions

iframe size with CSS on iOS

There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On …

Read More
position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More