# Embedding Chat & Player

**URL:** <https://discuss.dev.twitch.com/t/embedding-chat-player/17777>\
**Category:** API\
**Created:** [September 19, 2018, 1:29pm UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777 "2018-09-19T13:29:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rydema](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Rydema](https://discuss.dev.twitch.com/u/Rydema)\
**Post date:** [September 19, 2018, 1:29pm UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777/1 "2018-09-19T13:29:48Z")

</div>

Afternoon all,

Not going to lie, Total noob with API stuff. I have recently re-vamped my website and my backend is using a cms called CouchCMS. I am looking to input a streamer of the week rotation into my site which is just invoked by a simple tick box on the back end. If the command is spotted ie If Streamer of the week = Yes then the command will basically be `<cms:show twitch_name />` - Now I had this working on an iframe and surely enough untick one tick another and the player changed to that twitch user.

My question is how do I embed this as well as make it responsive (bootstrap 4) **WITHOUT the use of an iframe**

---

<div class="post-metadata">

**Author:** ![george](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/george/32/120_2.png) [@george](https://discuss.dev.twitch.com/u/george)\
**Post date:** [September 19, 2018, 1:49pm UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777/2 "2018-09-19T13:49:55Z")

</div>

Twitch video and chat embeds are only available as iframes.

---

<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:** [September 20, 2018, 8:32am UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777/3 "2018-09-20T08:32:46Z")

</div>

> [@Rydema](#):
>
> My question is how do I embed this as well as make it responsive (bootstrap 4) **WITHOUT the use of an iframe**

The bootstrap docs cover this

> **[Embeds](https://getbootstrap.com/docs/4.1/utilities/embed/)**
>
> Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

```auto
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

```

---

<div class="post-metadata">

**Author:** ![Rydema](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Rydema](https://discuss.dev.twitch.com/u/Rydema)\
**Post date:** [September 21, 2018, 7:26pm UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777/4 "2018-09-21T19:26:18Z")

</div>

Ok what about just the player?

---

<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:** [September 22, 2018, 10:06am UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777/5 "2018-09-22T10:06:30Z")

</div>

It’s all iframes

> **[Embedding Twitch](https://dev.twitch.tv/docs/embed/)**
>
> Embedding Twitch in Your Website

---

<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:** [October 22, 2018, 10:15am UTC](https://discuss.dev.twitch.com/t/embedding-chat-player/17777/6 "2018-10-22T10:15:00Z")

</div>

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