From 50d53ee7e82efd745a0c72f8a526e4093be12e44 Mon Sep 17 00:00:00 2001
From: Kiritan Flux <flux@kopiloten.com>
Date: Sun, 22 Jan 2017 22:50:08 +0100
Subject: [PATCH] fixed some bootstrap stuff

---
 6_video.html  | 26 +++++++++++++-------------
 css/video.css | 15 ++++++++++-----
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/6_video.html b/6_video.html
index e1962c8d..4fa98729 100644
--- a/6_video.html
+++ b/6_video.html
@@ -26,11 +26,11 @@ permalink: /video/
 {% assign allTopicsABC = allTopics | sort %}
 
 <div class="content container-fluid">
-  
+
   <div class="row">
-    
+
     <div class="dark_bg col-md-10 col-md-offset-1">
-      
+
       <div class="button-group filter-button-group">
         <button data-filter="*">show all</button>
         {% for thisTopic in allTopicsABC %}
@@ -38,7 +38,7 @@ permalink: /video/
         {% endfor %}
       </div>
 
-      <div id="video-roster">
+      <div id="video-roster container-fluid">
 
        {% for post in site.posts %}
          {% for talk in post.talks %}
@@ -47,9 +47,9 @@ permalink: /video/
              {% if talk.topics %}
                {% assign tags = (talk.topics | split:",") %}
              {% endif %}
-           <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-md-3" vimeo="{{vimeo_id}}">
+           <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3 embed-responsive embed-responsive-16by9" vimeo="{{vimeo_id}}">
              <div class="video-title">{{talk.artist}}</div>
-             <img class="playbutton" src="/images/play-button.png" />
+             <div class="playbutton"></div>
              <div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div>
            </div>
            {% endif %}
@@ -62,7 +62,7 @@ permalink: /video/
           <div id="player"></div>
           <div id="close-button"></div>
         </div>
-      
+
     </div>
 
   </div>
@@ -72,20 +72,20 @@ permalink: /video/
 <script>
 
    jQuery( document ).ready(function() {
-     
+
      jQuery('.videobox').each(function() {
-       
+
        var $this = jQuery(this);
        jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
          $this.css('background', 'url("' + data.thumbnail_url + '")');
          $this.css('background-size', 'cover');
-         //$this.css('height', (($this.width()/4)*3));
+         $this.css('background-position', 'center center');
        });
 
        $this.on('mouseover', function() {
          var offset = $this.offset();
          var center = jQuery(window).width()/2;
-         if( offset.left > center) {
+         if( offset.left >= center) {
            jQuery('#videotext').css('right', '');
            jQuery('#videotext').css('left', '20px');
            jQuery('#videotext').css('top', '80px');
@@ -96,7 +96,7 @@ permalink: /video/
          }
 
          jQuery('#videotext').html($this.html());
-         $this.find("img").show();
+         $this.find(".playbutton").show();
          timer = window.setTimeout(function() {
            jQuery('#videotext').show(300);
          }, 500);
@@ -104,7 +104,7 @@ permalink: /video/
 
        $this.on('mouseout', function() {
          jQuery('#videotext').hide();
-         $this.find("img").hide();
+         $this.find(".playbutton").hide();
          if (timer) {
            window.clearTimeout(timer);
          }
diff --git a/css/video.css b/css/video.css
index 9fa3bd40..e020f8e8 100644
--- a/css/video.css
+++ b/css/video.css
@@ -61,19 +61,24 @@
 }
 
 #videotext .playbutton{
-  display:none;
+  display: none;
 }
 
 .playbutton
 {
   display:block;
   position:absolute;
-  top:70px;
-  left:90px;
   z-index:1000000;
-  width:60px;
-  display:none;
+  height:100%;
+  width:100%;
+  top:0;
+  left:0;
+  background-image: url("/images/play-button.png");
+  background-size: 60px 60px;
+  background-repeat: no-repeat;
+  background-position: center center;
   pointer-events: none;
+  display:none;
 }
 
 #videoplayer