Responsive Native Embed on Website

API
1

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?

2

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

3

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){}