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.
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.
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:
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.