iFrame with html5 banner not scaling right

pta74
(@pta74)

5 years, 8 months ago

Hi,

I’m using the iframe plugin to display a html banner on this page http://prebenthrige.dk/banner-test/. The iframe scales perfect on desktop, but when testing on mobile, the banner is not scaled down / displayed right. Is there any way to make the iframe responsive?

Any help would be much appreciated 🙂

Br / Prebene

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author webvitaly
(@webvitaly)

5 years, 8 months ago
Hi pta74,
I tried to test that page on mobile device and it is working fine for me.
Can you specify which mobile device you have problem with?
- This reply was modified 5 years, 8 months ago by webvitaly.
Thread Starter pta74
(@pta74)

5 years, 8 months ago

Hi,

On desktop the banner looks fine:

But when I test on my iPhone I only see a part of the banner.

Is there something I can do to make it responsive?

Br / Preben

Plugin Author webvitaly
(@webvitaly)

5 years, 8 months ago

Oh, I see the issue now.
Unfortunately there is nothing can be done here because the embedded page is not responsive on mobile devices by itself.

http://www.prebenthrige.dk/html5-bannere/mcb-top.html

Thread Starter pta74
(@pta74)

5 years, 8 months ago

Hi,

The html banner has been designed in Adobe Animation and is responsive (by width).
When testing the banner on it’s own it looks prefect:

You can see that page here also:

http://www.prebenthrige.dk/html5-bannere/mcb-top.html

Is there a class I can add to the iframe plugin code, it make the iframe container responsive?

Br / Preben

Plugin Author webvitaly
(@webvitaly)

5 years, 8 months ago

You may try to add width=”100%” to make iframe width fluid and see if that helped.

[iframe src=”http://www.youtube.com/embed/4qsGTXLnmKs” width=”100%” height=”500″]

Thread Starter pta74
(@pta74)

5 years, 8 months ago

My code for the banner looks like this:

[iframe src=”http://www.prebenthrige.dk/html5-bannere/mcb-top.html” width=”100%” height=”582″]

So I don’t understand why the iframe doesn’t scale down when displayed on mobile?
Plugin Author webvitaly
(@webvitaly)

5 years, 8 months ago
I think I found the explanation. THere is an issue with iframe on iOS.
https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari

Please try this shortcode and see if that works:

[iframe src=”http://www.prebenthrige.dk/html5-bannere/mcb-top.html” width=”100%” height=”582″ style=”min-width:100%; max-width:100%; width:200px;”]
- This reply was modified 5 years, 8 months ago by webvitaly.
Thread Starter pta74
(@pta74)

5 years, 8 months ago

I have tried this code:

[iframe src=”http://www.prebenthrige.dk/html5-bannere/mcb-top.html” width=”100%” height=”582″ style=”min-width:100%; max-width:100%; width:200px;”]

But it didn’t solve the problen. Did I set it up wrong?

Plugin Author webvitaly
(@webvitaly)

5 years, 8 months ago

Weird.
I think you did everything properly and unfortunately I can not found what is causing the issue.
You may try another iframe plugin and see if that works for you.
I will try to search a solution and reply if I will found anything.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘iFrame with html5 banner not scaling right’ is closed to new replies.

Tags