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