optimized design. background image changes

6_video.html

@@ -91,9 +91,164 @@ permalink: /video/
        });
 
        $this.on('mouseover', function() {
-         var offset = $this.offset();
+         var offset = $this.offset().left;
-         var center = jQuery(window).width()/2;
+         var center = (jQuery(window).width()/2) - 50;
-         if( offset.left >= center) {
+         if( offset >= center) {
+           jQuery('#videotext').css('right', '');
+           jQuery('#videotext').css('left', '20px');
+           jQuery('#videotext').css('top', '80px');
+         } else {
+           jQuery('#videotext').css('left', '');
+           jQuery('#videotext').css('right', '20px');
+           jQuery('#videotext').css('top', '80px');
+         }
+
+         jQuery('#videotext').html($this.html());
+         timer = window.setTimeout(function() {
+           jQuery('#videotext').show(300);
+         }, 500);
+       });
+
+       $this.on('mouseout', function() {
+         jQuery('#videotext').hide();
+         $this.find(".playbutton").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+       });
+
+       $this.on('click', function() {
+         jQuery('#videotext').hide();
+         $this.find("img").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+         jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
+           var player = jQuery('#videoplayer #player');
+           player.html(data.html)
+           player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
+           var src = player.find( "iframe" ).attr('src');
+           player.find( "iframe" ).attr('src', src + "?title=0&byline=0&portrait=0&autoplay=1");
+         });
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
+       });
+
+       jQuery('#close-button').on('click', function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
+           jQuery('#videoplayer #player').html('');
+         });
+       });
+
+     });
+     $('#video-roster').isotope({
+       // options
+       itemSelector: '.videobox'
+     });
+     // init Isotope
+      var $grid = $('#video-roster').isotope({
+      });
+      // filter items on button click
+      $('.filter-button-group').on( 'click', 'button', function() {
+        var filterValue = $(this).attr('data-filter');
+        $grid.isotope({ filter: filterValue });
+        $('.filter-button-group').find('button').css('background-color', 'black');
+        $(this).css('background-color', '#5a4b68');
+      });
+   });
+ </script>ble: false
+permalink: /video_fullscreen/
+---
+
+{% assign allTopics = "" | split:"|"  %}
+{% for post in site.posts %}
+  {% for talk in post.talks %}
+    {% if talk.talk_video_url %}
+      {% for topic in talk.topics %}
+        {% assign talkTopics = topic | split:","  %}
+        {% for talkTopic in talkTopics %}
+        {% assign tt = talkTopic | strip | downcase %}
+          {% unless allTopics contains tt %}
+            {% assign allTopics = allTopics | push: tt %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+{% assign allTopicsABC = allTopics | sort %}
+
+<div class="content no-header">
+
+  <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 %}
+          <button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
+        {% endfor %}
+      </div>
+
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+  <div class="row">
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div id="video-roster" class="container-fluid">
+
+       {% for post in site.posts %}
+         {% for talk in post.talks %}
+           {% if talk.talk_video_url %}
+             {% assign vimeo_id = talk.talk_video_url %}
+             {% 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-sm-3" vimeo="{{vimeo_id}}">
+             <div class="video-title">{{talk.artist}}</div>
+             <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>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+           </div>
+           {% endif %}
+         {% endfor %}
+       {% endfor %}
+
+        <div id="videotext"></div>
+
+        <div id="videoplayer">
+          <div id="player"></div>
+          <div id="close-button"></div>
+        </div>
+
+    </div>
+
+  </div>
+
+</div> <!-- container -->
+
+<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('background-position', 'center center');
+       });
+
+       $this.on('mouseover', function() {
+         var offset = $this.offset().left;
+         var center = (jQuery(window).width()/2) - 50;
+         if( offset >= center) {
            jQuery('#videotext').css('right', '');
            jQuery('#videotext').css('left', '20px');
            jQuery('#videotext').css('top', '80px');
@@ -131,11 +286,13 @@ permalink: /video/
            var src = player.find( "iframe" ).attr('src');
            player.find( "iframe" ).attr('src', src + "?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1");
          });
-         jQuery('#videoplayer').fadeIn(300);
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
        });
 
-       jQuery('#videoplayer').on('click', function() {
+       jQuery('#close-button').on('click', function() {
-         jQuery(this).fadeOut(500, function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
            jQuery('#videoplayer #player').html('');
          });
        });

7_video_no_header_or_footer.html

@@ -2,6 +2,8 @@
 layout: no_header_or_footer
 title: Video showcase
 icon: video
+visititle: Video showcase
+icon: video
 visible: false
 permalink: /video_fullscreen/
 ---
@@ -91,9 +93,164 @@ permalink: /video_fullscreen/
        });
 
        $this.on('mouseover', function() {
-         var offset = $this.offset();
+         var offset = $this.offset().left;
-         var center = jQuery(window).width()/2;
+         var center = (jQuery(window).width()/2) - 50;
-         if( offset.left >= center) {
+         if( offset >= center) {
+           jQuery('#videotext').css('right', '');
+           jQuery('#videotext').css('left', '20px');
+           jQuery('#videotext').css('top', '80px');
+         } else {
+           jQuery('#videotext').css('left', '');
+           jQuery('#videotext').css('right', '20px');
+           jQuery('#videotext').css('top', '80px');
+         }
+
+         jQuery('#videotext').html($this.html());
+         timer = window.setTimeout(function() {
+           jQuery('#videotext').show(300);
+         }, 500);
+       });
+
+       $this.on('mouseout', function() {
+         jQuery('#videotext').hide();
+         $this.find(".playbutton").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+       });
+
+       $this.on('click', function() {
+         jQuery('#videotext').hide();
+         $this.find("img").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+         jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
+           var player = jQuery('#videoplayer #player');
+           player.html(data.html)
+           player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
+           var src = player.find( "iframe" ).attr('src');
+           player.find( "iframe" ).attr('src', src + "?title=0&byline=0&portrait=0&autoplay=1");
+         });
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
+       });
+
+       jQuery('#close-button').on('click', function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
+           jQuery('#videoplayer #player').html('');
+         });
+       });
+
+     });
+     $('#video-roster').isotope({
+       // options
+       itemSelector: '.videobox'
+     });
+     // init Isotope
+      var $grid = $('#video-roster').isotope({
+      });
+      // filter items on button click
+      $('.filter-button-group').on( 'click', 'button', function() {
+        var filterValue = $(this).attr('data-filter');
+        $grid.isotope({ filter: filterValue });
+        $('.filter-button-group').find('button').css('background-color', 'black');
+        $(this).css('background-color', '#5a4b68');
+      });
+   });
+ </script>ble: false
+permalink: /video_fullscreen/
+---
+
+{% assign allTopics = "" | split:"|"  %}
+{% for post in site.posts %}
+  {% for talk in post.talks %}
+    {% if talk.talk_video_url %}
+      {% for topic in talk.topics %}
+        {% assign talkTopics = topic | split:","  %}
+        {% for talkTopic in talkTopics %}
+        {% assign tt = talkTopic | strip | downcase %}
+          {% unless allTopics contains tt %}
+            {% assign allTopics = allTopics | push: tt %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+{% assign allTopicsABC = allTopics | sort %}
+
+<div class="content no-header">
+
+  <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 %}
+          <button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
+        {% endfor %}
+      </div>
+
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+  <div class="row">
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div id="video-roster" class="container-fluid">
+
+       {% for post in site.posts %}
+         {% for talk in post.talks %}
+           {% if talk.talk_video_url %}
+             {% assign vimeo_id = talk.talk_video_url %}
+             {% 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-sm-3" vimeo="{{vimeo_id}}">
+             <div class="video-title">{{talk.artist}}</div>
+             <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>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+           </div>
+           {% endif %}
+         {% endfor %}
+       {% endfor %}
+
+        <div id="videotext"></div>
+
+        <div id="videoplayer">
+          <div id="player"></div>
+          <div id="close-button"></div>
+        </div>
+
+    </div>
+
+  </div>
+
+</div> <!-- container -->
+
+<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('background-position', 'center center');
+       });
+
+       $this.on('mouseover', function() {
+         var offset = $this.offset().left;
+         var center = (jQuery(window).width()/2) - 50;
+         if( offset >= center) {
            jQuery('#videotext').css('right', '');
            jQuery('#videotext').css('left', '20px');
            jQuery('#videotext').css('top', '80px');
@@ -131,11 +288,13 @@ permalink: /video_fullscreen/
            var src = player.find( "iframe" ).attr('src');
            player.find( "iframe" ).attr('src', src + "?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1");
          });
-         jQuery('#videoplayer').fadeIn(300);
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
        });
 
-       jQuery('#videoplayer').on('click', function() {
+       jQuery('#close-button').on('click', function() {
-         jQuery(this).fadeOut(500, function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
            jQuery('#videoplayer #player').html('');
          });
        });

_site/about/index.html

@@ -1192,6 +1192,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="post">
 

_site/artists/index.html

@@ -1192,6 +1192,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="post">
 

_site/call-for-talks/index.html

@@ -1192,6 +1192,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="post">
 

_site/css/video.css

@@ -16,11 +16,12 @@
   right: 0;
   left: 0;
   margin-bottom:20px;
+  border: 4px solid transparent;
 }
 
 .videobox:hover
 {
-  /*opacity:1;*/
+  border: 4px solid #5a4b68;
 }
 
 .videobox .video-title
@@ -37,15 +38,15 @@
 
 #videotext
 {
-  width:40%;
+  width:45%;
   background-color:#000;
-  opacity:.8;
+  opacity:.9;
   position:fixed;
   z-index:10000;
-  right:50px;
+  right:20px;
-  bottom: 50px;
+  bottom: 20px;
   display:none;
-  padding:30px;
+  padding:20px;
   color:#fff;
 }
 
@@ -63,7 +64,6 @@
 
 #videotext .video-description
 {
-  display:block;
   font-size: 1em;
 }
 
@@ -117,7 +117,7 @@
   display:block;
   width:50px;
   height:50px;
-  top:90px;
+  top:30px;
   right:30px;
   background-image:url("/images/close-button-large.png");
   background-size:cover;

_site/feed.xml

@@ -6,8 +6,8 @@
 </description>
   <link>http://scopesessions.org/</link>
   <atom:link href="http://scopesessions.org /feed.xml " rel="self" type="application/rss+xml" />
-  <pubDate>Mon, 23 Jan 2017 12:34:45 +0100</pubDate>
+  <pubDate>Mon, 23 Jan 2017 14:31:50 +0100</pubDate>
-  <lastBuildDate>Mon, 23 Jan 2017 12:34:45 +0100</lastBuildDate>
+  <lastBuildDate>Mon, 23 Jan 2017 14:31:50 +0100</lastBuildDate>
   <generator>Jekyll v3.1.6</generator>
   
   <item>

_site/index.html

@@ -1193,6 +1193,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   
 

_site/session/2011/07/07/001.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/07/21/002.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/08/18/003.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/09/15/004.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/09/29/005.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/10/06/006.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/10/20/007.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/11/10/008.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2011/11/17/009.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/01/12/010.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/02/09/011.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/03/08/012.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/04/12/013.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/05/10/014.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/09/13/015.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/10/11/016.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/11/08/017.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2012/12/13/018.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/02/21/019.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/03/14/020.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/04/11/021.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/05/09/022.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/06/06/023.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/07/11/024.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/09/12/025.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/10/10/026.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/11/14/027.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2013/12/12/028.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/02/13/029.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/03/20/030.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/04/10/031.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/05/08/032.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/06/12/033.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/07/10/034.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/09/11/035.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/10/09/036.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/11/13/037.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2014/12/11/038.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/01/08/039.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/03/12/040.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/03/12/041.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/04/09/042.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/05/14/043.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/06/11/044.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/06/27/045.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/09/10/046.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/09/19/047.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/10/08/048.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/11/12/049.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2015/12/10/050.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/01/14/051.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/02/11/052.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/03/10/053.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/04/14/054.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/05/12/055.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/06/24/057.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/09/08/058.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/10/13/059.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/11/10/060.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2016/12/08/061.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/session/2017/01/28/062.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/special/2011/12/11/Freemote.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/special/2012/03/23/B-Seite.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/special/2012/06/01/LPM.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/special/2014/03/23/B-Seite.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/special/2016/06/11/MIRA.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/spektrum/2015/10/09/048s.html

@@ -1191,6 +1191,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="content container-fluid">
 

_site/spektrum/index.html

@@ -1192,6 +1192,7 @@
   </div>
 </div>
 
+
  <div class="content container-fluid">
   <div class="post">
 

css/video.css

@@ -16,11 +16,12 @@
   right: 0;
   left: 0;
   margin-bottom:20px;
+  border: 4px solid transparent;
 }
 
 .videobox:hover
 {
-  /*opacity:1;*/
+  border: 4px solid #5a4b68;
 }
 
 .videobox .video-title
@@ -37,15 +38,15 @@
 
 #videotext
 {
-  width:40%;
+  width:45%;
   background-color:#000;
-  opacity:.8;
+  opacity:.9;
   position:fixed;
   z-index:10000;
-  right:50px;
+  right:20px;
-  bottom: 50px;
+  bottom: 20px;
   display:none;
-  padding:30px;
+  padding:20px;
   color:#fff;
 }
 
@@ -63,7 +64,6 @@
 
 #videotext .video-description
 {
-  display:block;
   font-size: 1em;
 }
 
@@ -117,7 +117,7 @@
   display:block;
   width:50px;
   height:50px;
-  top:90px;
+  top:30px;
   right:30px;
   background-image:url("/images/close-button-large.png");
   background-size:cover;