diff --git a/css/main.css b/css/main.css
index 60c8281..d6e6cd5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -61,7 +61,7 @@
   border-color: #7B848F;
 }
 
-.intro{
+.intro {
   border-radius: 6px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -74,10 +74,16 @@
   position: relative;
 }
 
+.intro #video-player {
+  height: 100%;
+}
+
 .intro iframe {
   border-radius: 6px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .intro img {
diff --git a/index.html b/index.html
index 2d20a79..f4bd4f0 100644
--- a/index.html
+++ b/index.html
@@ -58,15 +58,7 @@
             </div>
           </div>
         <div class="intro">
-            <iframe 
-                class="hidden"
-                src="https://player.twitch.tv/?channel={TWITCH_USER_NAME}" 
-                height="100%" 
-                width="100%" 
-                frameborder="0" 
-                scrolling="no"
-                allowfullscreen="true"
-            ></iframe>
+          <div id="video-player" class="hidden"></div>
           <div class="intro-text">
             <h1>Twitch Stream offline.</h1>
             <p>Stream offline. Come back later and watch me play.</p>
@@ -156,6 +148,7 @@ <h2>Chat</h2>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
+    <script src= "//player.twitch.tv/js/embed/v1.js"></script>
 
     <script src="js/vendor/bootstrap.min.js"></script>
 
diff --git a/js/main.js b/js/main.js
index 97d6d57..d47a747 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,16 +1,33 @@
+/* global Twitch */
+
 // Change this to be your own clientId from https://www.twitch.tv/kraken/oauth2/clients/new
 var clientId = "a7aag1oiocd1vxl0h9jvd2sahmaq5j0";
+var twitchUsername = "{TWITCH_USER_NAME}";
 
 $.getJSON( "https://api.twitch.tv/kraken/streams/twitchusername?client_id="+ clientId + "&callback=?", function(response) {
   if (response.stream){
-    $('.viewers span').text(response.stream.viewers);
-    $('.intro iframe').removeClass("hidden");
-    $('.intro-text').addClass('hidden');
+    $(".viewers span").text(response.stream.viewers);
+    $(".intro-text").addClass("hidden");
   }else{
-    $('.viewers span').text("0");
+    $(".viewers span").text("0");
   }
 });
 
 $.getJSON( "https://api.twitch.tv/kraken/channels/twitchusername/follows?client_id="+ clientId + "&callback=?", function(response) {
-  $('.followers span').text(response["_total"]);
+  $(".followers span").text(response["_total"]);
 });
+
+var options = {
+  channel: twitchUsername
+};
+var player = new Twitch.Player("video-player", options);
+
+player.addEventListener(Twitch.Player.ONLINE, function() {
+  $("#video-player").removeClass("hidden");
+  $(".intro-text").addClass("hidden");
+});
+
+player.addEventListener(Twitch.Player.OFFLINE, function() {
+  $("#video-player").addClass("hidden");
+  $(".intro-text").removeClass("hidden");
+});
\ No newline at end of file