fixed some bootstrap stuff

6_video.html

@@ -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 %}
@@ -79,13 +79,13 @@ permalink: /video/
        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);
          }

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