From 5bc6cc62ec10778e2feccfea4c2ff16a106d2c0f Mon Sep 17 00:00:00 2001
From: Asutosh Palai <asupalai@gmail.com>
Date: Mon, 4 Jul 2016 07:44:44 -0400
Subject: [PATCH] Fixed youtube video display

---
 css/base.scss     |  6 ++++--
 index.html        |  5 +++--
 js/application.js | 20 ++++++++++++++++++++
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/css/base.scss b/css/base.scss
index fae9e62..b7ade34 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -323,6 +323,7 @@ body {
     z-index: 10;
     top: 50%;
     transform: translateY(-50%);
+    pointer-events: none;
     h1 {
       font-weight: bold;
       line-height: 0.98;
@@ -339,7 +340,8 @@ body {
 .carousel-inner{
 
   .video-container {
-    height: 90%;
+    width: 70%;
+    padding: 2%;
   }
 
   > .item > img {
@@ -550,4 +552,4 @@ footer {
     font-weight: 500;
     font-size: 1.9em;
   }
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index a571074..a813abe 100644
--- a/index.html
+++ b/index.html
@@ -73,10 +73,10 @@ title: "Home"
           <div class="container">
             <div class="video-container center-both">
               <div class="embed-responsive embed-responsive-16by9">
-                <iframe src="https://www.youtube.com/embed/{{ video.id }}" frameborder="0" allowfullscreen></iframe>
+                <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1" allowfullscreen></iframe>
               </div>
             </div>
-            <div class="carousel-caption">
+            <div class="carousel-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
               <h1>{{ video.title }}</h1>
             </div>
           </div>
@@ -97,4 +97,5 @@ title: "Home"
         <span
               class="sr-only">Next</span>
       </a>
+      <script type="text/javascript" src="https://www.youtube.com/iframe_api" async></script>
     </div><!-- /.carousel -->
diff --git a/js/application.js b/js/application.js
index d8eea4b..f359344 100644
--- a/js/application.js
+++ b/js/application.js
@@ -6,3 +6,23 @@ $(function() {
     $(this).addClass(imgClass);
   })
 });
+
+function onYouTubeIframeAPIReady() {
+  $('.youtube-video').each(function() {
+    var id = $(this).data('id');
+
+    var player = new YT.Player('youtube-video-' + id, {
+      events: {
+        'onStateChange': onPlayerStateChange
+      }
+    });
+
+    function onPlayerStateChange(event) {
+      if(event.data === YT.PlayerState.ENDED || event.data === YT.PlayerState.PAUSED)
+        $('#youtube-title-' + id).show();
+      else
+        $('#youtube-title-' + id).hide();
+    }
+
+  });
+}