# Crop/zoom in embedded player only?

**URL:** <https://discuss.dev.twitch.com/t/crop-zoom-in-embedded-player-only/29373>\
**Category:** API\
**Created:** [December 5, 2020, 3:34pm UTC](https://discuss.dev.twitch.com/t/crop-zoom-in-embedded-player-only/29373 "2020-12-05T15:34:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![broccolistem](https://avatars.discourse-cdn.com/v4/letter/b/a5b964/32.png) [@broccolistem](https://discuss.dev.twitch.com/u/broccolistem)\
**Post date:** [December 5, 2020, 3:34pm UTC](https://discuss.dev.twitch.com/t/crop-zoom-in-embedded-player-only/29373/1 "2020-12-05T15:34:12Z")

</div>

Hi,

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:

[[Album] imgur.com ![](https://d2opxh93rbxzdn.cloudfront.net/original/2X/9/937aae7ff495f76bcb2fd6f0cf0b36004244d043.jpeg "imgur.com") ](https://imgur.com/a/Jmio9nB)

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

[[Album] imgur.com ![](https://d2opxh93rbxzdn.cloudfront.net/original/2X/1/11482d21a349e12d28b6cddfc03baaa808692afb.jpeg "imgur.com") ](https://imgur.com/a/1IR4fJr)

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!

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [December 5, 2020, 3:37pm UTC](https://discuss.dev.twitch.com/t/crop-zoom-in-embedded-player-only/29373/2 "2020-12-05T15:37:00Z")

</div>

> [@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 😃

---

<div class="post-metadata">

**Author:** ![broccolistem](https://avatars.discourse-cdn.com/v4/letter/b/a5b964/32.png) [@broccolistem](https://discuss.dev.twitch.com/u/broccolistem)\
**Post date:** [December 5, 2020, 3:46pm UTC](https://discuss.dev.twitch.com/t/crop-zoom-in-embedded-player-only/29373/3 "2020-12-05T15:46:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [January 4, 2021, 3:46pm UTC](https://discuss.dev.twitch.com/t/crop-zoom-in-embedded-player-only/29373/4 "2021-01-04T15:46:35Z")

</div>

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