Fixed youtube video display

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;
   }
-}
+}

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 -->

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();
+    }
+
+  });
+}