Video Test
You might have noticed that gfycat recently put a white banner underneath all their embedded videos. The banner reduces the available height for the video, scaling it down and adding black bars on its left and right sides. As I use gfycat for tutorial animations, my tutorial pages are also affected.
The banner could become optional at some point, but in the mean time I've experimented with some styling to get rid of it, restoring the videos to their original form. It appears to work, but I'd appreciate it if some of you checked whether it works for you too. Please let me know if it doesn't.
The test case is the Bloom tutorial, which has four videos near the bottom of the page.
Comments (13)
Thanks for the help, everyone! I have applied the changes to all tutorials.
Working in Firefox on Windows 10
You are right about the cached CSS file in Chrome. I now get the same eperience on both Chrome and Edge. Looks good. Still problem med IE. I have tried a different computer (also with IE 11.285.17134.0) and it does not play any movies from Gfycat. Nothing happens if I press the play button, nor can I fast-forward.
Looks like that's a general gfycat problem. Luckily, almost no one that browses my tutorials uses IE.
Chrome 69.0.3497.100 Works as expected with a white banner at the bottom. Video scaled so all content is visible but of course with large black bars on the sides. Microsoft Edge 42.17134.1.0 There is no banner at the bottom. All content is visible and no bars on the sides. Microsoft Internet Explorer 11.285.17134.0 All content is visible and no banner, but it does not play (have reloaded the page several times).
Chrome could be using an old cached CSS filed. Could you try with a fresh load of the CSS? Does IE play the videos on other pages?
Seems to be working as expected in Chrome 69 and FF 62 / Win 10
But no banner!
Android 7.0 Chrome: they won't automatically play unless I tap them.
I think that's a feature. In any case, that's not under my control.
Look great here Chrome on Windows.
Looks good on Android in Chrome
They look fine for me! No white banner visible. I'm on macos Mojave in Safari 12.