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.

You are watching: Twitch stream zoomed in

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:


imgur.com
*

and on mobile, a draft design would be like this:


imgur.com
*

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!


BarryCarlyon December 5, 2020, 3:37pm #2
*
broccolistem:

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?

Basically yes.

Or turn the phone landscape.

Welcome to fun with responsive design

*


broccolistem December 5, 2020, 3:47pm #3

Basically yes.

Or turn the phone landscape.

Welcome to fun with responsive design

Thanks for the quick reply Barry! I could even deal with chopping the whole image in CSS, and losing the direct links to twitch/audio control etc. But I definitely don’t want to break any twitch rules in obscuring the embedded elements.

It would be super cool if there was an option to crop or zoom the whole stream. A helpful alternative would be an option to adjust just the dimensions of the twitch follow/sub/audio-ctl overlay.

See more: How To Get Rare Candy In Pokemon Sun And Ultra Moon, How To Obtain Rare Candies In Sun And Moon

If anyone has an alternative idea, I’d love to hear it. We spent a fair amount of effort in creating a visual design that could work as cropped or uncropped, so it will be a little sad to see a tiny scrunched stream on mobile. But of course I should have checked into this sooner:)


system closed January 4, 2021, 3:46pm #4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Home Categories FAQ/Guidelines Terms of Service Privacy Policy

Powered by Discourse, best viewed with JavaScript enabled