randogoth/scopesessions.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed some bootstrap stuff

Browse source
This commit is contained in:
Kiritan Flux 2017-01-22 22:50:08 +01:00
parent 06becf58e7
commit 50d53ee7e8
2 changed files with 23 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

26
6_video.html
View file

@ -26,11 +26,11 @@ permalink: /video/
{% assign allTopicsABC = allTopics | sort %} {% assign allTopicsABC = allTopics | sort %}
<div class="content container-fluid"> <div class="content container-fluid">
<div class="row"> <div class="row">
<div class="dark_bg col-md-10 col-md-offset-1"> <div class="dark_bg col-md-10 col-md-offset-1">
<div class="button-group filter-button-group"> <div class="button-group filter-button-group">
<button data-filter="*">show all</button> <button data-filter="*">show all</button>
{% for thisTopic in allTopicsABC %} {% for thisTopic in allTopicsABC %}
@ -38,7 +38,7 @@ permalink: /video/
{% endfor %} {% endfor %}
</div> </div>
<div id="video-roster"> <div id="video-roster container-fluid">
{% for post in site.posts %} {% for post in site.posts %}
{% for talk in post.talks %} {% for talk in post.talks %}
@ -47,9 +47,9 @@ permalink: /video/
{% if talk.topics %} {% if talk.topics %}
{% assign tags = (talk.topics | split:",") %} {% assign tags = (talk.topics | split:",") %}
{% endif %} {% 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> <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 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> </div>
{% endif %} {% endif %}
@ -62,7 +62,7 @@ permalink: /video/
<div id="player"></div> <div id="player"></div>
<div id="close-button"></div> <div id="close-button"></div>
</div> </div>
</div> </div>
</div> </div>
@ -72,20 +72,20 @@ permalink: /video/
<script> <script>
jQuery( document ).ready(function() { jQuery( document ).ready(function() {
jQuery('.videobox').each(function() { jQuery('.videobox').each(function() {
var $this = jQuery(this); var $this = jQuery(this);
jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) { 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', 'url("' + data.thumbnail_url + '")');
$this.css('background-size', 'cover'); $this.css('background-size', 'cover');
//$this.css('height', (($this.width()/4)*3)); $this.css('background-position', 'center center');
}); });
$this.on('mouseover', function() { $this.on('mouseover', function() {
var offset = $this.offset(); var offset = $this.offset();
var center = jQuery(window).width()/2; var center = jQuery(window).width()/2;
if( offset.left > center) { if( offset.left >= center) {
jQuery('#videotext').css('right', ''); jQuery('#videotext').css('right', '');
jQuery('#videotext').css('left', '20px'); jQuery('#videotext').css('left', '20px');
jQuery('#videotext').css('top', '80px'); jQuery('#videotext').css('top', '80px');
@ -96,7 +96,7 @@ permalink: /video/
} }
jQuery('#videotext').html($this.html()); jQuery('#videotext').html($this.html());
$this.find("img").show(); $this.find(".playbutton").show();
timer = window.setTimeout(function() { timer = window.setTimeout(function() {
jQuery('#videotext').show(300); jQuery('#videotext').show(300);
}, 500); }, 500);
@ -104,7 +104,7 @@ permalink: /video/
$this.on('mouseout', function() { $this.on('mouseout', function() {
jQuery('#videotext').hide(); jQuery('#videotext').hide();
$this.find("img").hide(); $this.find(".playbutton").hide();
if (timer) { if (timer) {
window.clearTimeout(timer); window.clearTimeout(timer);
} }

15
css/video.css
View file

@ -61,19 +61,24 @@
} }
#videotext .playbutton{ #videotext .playbutton{
display:none; display: none;
} }
.playbutton .playbutton
{ {
display:block; display:block;
position:absolute; position:absolute;
top:70px;
left:90px;
z-index:1000000; z-index:1000000;
width:60px; height:100%;
display:none; 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; pointer-events: none;
display:none;
} }
#videoplayer #videoplayer