# Responsive Native Embed on Website

**URL:** <https://staging-discuss.dev.twitch.com/t/responsive-native-embed-on-website/16669>\
**Category:** API\
**Created:** [July 17, 2018, 7:21pm UTC](https://staging-discuss.dev.twitch.com/t/responsive-native-embed-on-website/16669 "2018-07-17T19:21:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GaganBhat](https://avatars.discourse-cdn.com/v4/letter/g/c37758/32.png) [@GaganBhat](https://staging-discuss.dev.twitch.com/u/GaganBhat)\
**Post date:** [July 17, 2018, 7:21pm UTC](https://staging-discuss.dev.twitch.com/t/responsive-native-embed-on-website/16669/1 "2018-07-17T19:21:12Z")

</div>

Currently I have this in my HTML code.

```
<div id="twitch-embed"></div>
      <script src="https://embed.twitch.tv/embed/v1.js"></script>
      <script type="text/javascript">
        new Twitch.Embed("twitch-embed", {
          width: 888.8,
          height: 500,
          channel: "firstupdatesnow",
        });
      </script>

```

Everything looks great in desktop, but as you know, that is not a responsive embed. When I attempt to resize the thing, it starts looking wonky— you get the point.

Is there a way to use the ‘Twitch.embed’ option and without using iFrame (iFrame is not as interactive and doesn’t have the inbuilt sub button) to make it responsive?

---

<div class="post-metadata">

**Author:** ![Xxplosions](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/xxplosions/32/5420_2.png) [@Xxplosions](https://staging-discuss.dev.twitch.com/u/Xxplosions)\
**Post date:** [July 18, 2018, 9:41pm UTC](https://staging-discuss.dev.twitch.com/t/responsive-native-embed-on-website/16669/2 "2018-07-18T21:41:32Z")

</div>

I haven’t messed with the embed at all, but couldn’t you do the width/height based on window size? IE using a percentage instead of a fixed width/height

---

<div class="post-metadata">

**Author:** ![AlbericoD](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/albericod/32/4325_2.png) [@AlbericoD](https://staging-discuss.dev.twitch.com/u/AlbericoD)\
**Post date:** [July 18, 2018, 10:06pm UTC](https://staging-discuss.dev.twitch.com/t/responsive-native-embed-on-website/16669/3 "2018-07-18T22:06:15Z")

</div>

regardless of technology, you could do this only with media querys in css, I’ll post an example for you functional:

@media (min-width:320px) { /\* smartphones, iPhone, portrait 480x320 phones _/ }  
 @media (min-width:481px) { /_ portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. _/ }  
 @media (min-width:641px) { /_ portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones _/ }  
 @media (min-width:961px) { /_ tablet, landscape iPad, lo-res laptops ands desktops _/ }  
 @media (min-width:1025px) { /_ big landscape tablets, laptops, and desktops _/ }  
 @media (min-width:1281px) { /_ hi-res laptops and desktops \*/ }

iphone  
@media only screen and (min-device-width: 480px){}  
ipads or tablets  
@media only screen and (min-device-width: 768px){}

---

<div class="post-metadata">

**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\
**Post date:** [August 17, 2018, 10:06pm UTC](https://staging-discuss.dev.twitch.com/t/responsive-native-embed-on-website/16669/4 "2018-08-17T22:06:19Z")

</div>

Closed on August 17, 2018, 10:06pm UTC

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