I’m looking to embed my video stream (with no chat) on a website. The stream on twitch is 16:9, but for mobile users I was hoping to crop out the sides of the stream (or zoom in) to bring it down to 2:3, while still maintaining the maximum embed height.
So on my Twitch embed on a desktop, the user would see the full 16:9 widescreen embedded stream. On mobile, the user would see a cropped or zoomed in version where the sides are missing from the visual space.
So on desktop, a draft design would be like this:
and on mobile, a draft design would be like this:
I had planned to achieve this with CSS. But looking into the Twitch embed-docs, I see that it might be impossible to resize the twitch overlay (with volume/follow/sub links etc) independently of the video stream itself. And also very importantly I noted that it’s against Twitch rules to obscure parts of the embedded streamn (or at least the overlay).
Is there any solution to achieve what I want to do? Or will mobile users be stuck seeing a tiny 16:9 stream at the top of their screen, and must click ‘full screen’ in order to see a larger image?
Thank you in advance for your suggestions!