Crop/zoom in embedded player only?


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!

Basically yes.

Or turn the phone landscape.

Welcome to fun with responsive design :smiley:

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.

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

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