TWITCH: Responsive Livestream Embed

//DEV REFERENCE: https://dev.twitch.tv/docs/embed
//CSS
.twitch-wrapper {position: relative;}
#twitch-embed {position: relative;width:75%;}
#twitch-embed:before{content: "";display: block;padding-top: 56.25%;}
.twitch-chat{position: absolute;top: 0;bottom: 0;right: 0;width: 25%;}
#twitch-embed iframe, .twitch-chat iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
@media (max-width: 1024px) {
    #twitch-embed{
        width:100%;
    }
    .twitch-chat{
        /*display:none;*/
        position: relative;
        clear: both;
        height: 300px;
        width: 100%;
    }
}

//HTML
<div class='twitch-wrapper'>
   <div id="twitch-embed"></div>
   <div class='twitch-chat'>
       <iframe frameborder="0" scrolling="no" src="https://www.twitch.tv/[YOUR TWITCH CHANNEL ID]/chat"></iframe>
   </div>
</div>

//JS
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
          var embed = new Twitch.Embed("twitch-embed", {
            width: 854,
            height: 480,
            channel: "[YOUR TWITCH CHANNEL ID]",
            layout: "video",
            autoplay: false
          });

          embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
            var player = embed.getPlayer();
            player.play();
          });
        </script>