Iframe overflow:hidden issue with gfycat embed

Hey guys,
I’ve been trying to use gfycat HTML5 within a Hype page, and it seems no matter what I do, I cannot stop the iframe from inheriting the scroll for touch devices.

I’ve tried adding overflow: hidden, overflow-x: hidden etc… putting a white shape with an opacity over the top, putting a png over the top, but no matter what the iframe contents just wants to scroll. To add to that, on MS Edge and Windows chrome, if the object isnt set to 100% of its height, it also displays scroll bars.

Basically I want to use GFYCAT content as background animation rather than video (as its hosted and kinder on bandwidth and users - and also avoids the autoplay nightmare across all the different browsers)

I cannot find one consistent approach that works across most browsers - any help would be greatly appreciated!!! I’ve added a basic hype doc for anyone who can help me.

iframe_hype_doc.hype.zip (12.6 KB)

Thank you - thank you - thank you

Possibly a simple fix is to extend the iframe to its 100% height then enclose in a Group and set that group as a mask by setting is height to where you want the cut off and visibility to hidden.

iframe_hype_doc_v2.hype.zip (10.4 KB)

This works in everything I tested on so far…

1 Like

You can also not use a HTML-Widget. Rather just use a DIV (Square symbol) and remove outline , overflow and background color. Then edit it with your Pen-Tool and add your iFrame in there:

iframe_hype_doc_max.hype.zip (16,3 KB)

Regards

PS: be carful if such “hotlinking” and hidding the source is allowed. I don’t think you will run into trouble but if you deploy this for a high profile customer with lot’s of exposure look into the terms of service if you can do this to avoid legal issues.

PPS: I didn’t change it on the mobil view.

PPPS: As I am on the road. I just remembered that I didn’t clean up your iFrame code. Basically you don’t need the height and width as attributes as they are set with CSS on the iFrame and also you can rather use a pixel height on the iFrame then percentages (use a higher value then your video footage to put the controls out of the view). That way working with the negativ margin to position the player becomes easier.

1 Like

Good call, this way you don’t get the elastic bounce.

1 Like

amazing response - thank you so much. Il try it now!
:ok_hand:

Thank you so much for your response! Very kind of you
:grinning:

1 Like

Just to summarise, the above fix from @MaxZieb worked perfectly in all browsers:

OSX

  • Chrome
  • Safari
  • Firefox

WIN

  • Chrome
  • Edge
  • IE
  • Firefox

At all viewport sizes too and also on my touch devices. Thank you both @MaxZieb and @MarkHunte for your help! You saved me such a lot of pain!

2 Likes