Commit 25251607 authored by Jonas Heinrich's avatar Jonas Heinrich

added video thumbs

parent a18c5d0c
.grid {
display: flex;
flex-wrap: wrap;
align-items: stretch;
position: relative;
overflow: hidden;
text-align: center;
user-select: none;
justify-content: center;
margin: 10px 7% -20px 8%;
}
.grid__item {
position: relative;
width: 100px;
padding-right: 1.5em;
padding-top: 0;
padding-bottom: 2em;
}
.profile-img {
border-radius: 50%;
height: 0;
padding-bottom: 100%;
}
.clip {
overflow: hidden;
}
.meta {
position: relative;
margin: 10px 0 0;
padding: 0 0px 0 0;
text-align: center;
}
.center {
text-align: center;
}
.meta__title {
font-size: .8em;
font-weight: bold;
line-height: 1.5em;
margin: 0;
padding: .4em 0 .5em;
}
.small {
font-size: .7em;
letter-spacing: 0;
}
.dark .quiet {
color: #7f7f7f;
color: rgba(255,255,255,.5);
}
......@@ -30,6 +30,7 @@ navigation {
content {
background: #142736;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
......
......@@ -35,3 +35,8 @@ p.video-description{
background-color: rgba(255,255,255,0.25);
cursor: pointer;
}
.video-item a {
text-decoration: none;
color:inherit;
}
......@@ -54,7 +54,7 @@ button {
.vid-wrapper .vid-controls-bottom {
z-index: 2;
position: absolute;
bottom: 20px;
bottom: 5px;
left: 0;
width: 100%;
height: 60px;
......
......@@ -21,5 +21,5 @@ $( ".btn + :not([class=disabled])" ).click(function() {
function load_page(link) {
$("content").empty();
$("content").hide().load(link).fadeIn('slow');
$("content").hide().load(link).fadeIn('fast');
}
......@@ -7,57 +7,83 @@
<section class="video-grid">
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span>
<p class="video-description">ein Werk von von Josef Albers (1954), Orangerie. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video1.jpg');"></div>
<a href='#' src='video/video1.html'>
<span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span>
<p class="video-description">ein Werk von von Josef Albers (1954), Orangerie. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Dynamische Struktur</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video2.jpg');"></div>
<a href='#' src='video/video2.html'>
<span class="video-title">Dynamische Struktur</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Überfall auf einen Geleitzug</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video3.jpg');"></div>
<a href='#' src='video/video3.html'>
<span class="video-title">Überfall auf einen Geleitzug</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Abendessen in der Scheune</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video4.jpg');"></div>
<a href='#' src='video/video4.html'>
<span class="video-title">Abendessen in der Scheune</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title"> Take a long break I, II</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video5.jpg');"></div>
<a href='#' src='video/video5.html'>
<span class="video-title"> Take a long break I, II</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video6.jpg');"></div>
<a href='#' src='video/video6.html'>
<span class="video-title">Großes Stillleben mit Kerzen und Spiegel</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video7.jpg');"></div>
<a href='#' src='video/video7.html'>
<span class="video-title">Van Gogh als verkannter Hochstapler</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video8.jpg');"></div>
<a href='#' src='video/video8.html'>
<span class="video-title">Die heilige Elisabeth von Thüringen</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video9.jpg');"></div>
<a href='#' src='video/video9.html'>
<span class="video-title">Markgraf Christoph I. von Baden mit seiner Familie</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
<div class="video-img" style="background-image: url('video/video10.jpg');"></div>
<a href='#' src='video/video10.html'>
<span class="video-title">Bubbles</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</a>
</div>
</section>
<script src="js/main.js"></script>
<script language="javascript">
$( ".video-item" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
</script>
</body>
</html>
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video1.webm" id="html-player" style="width: 100%;" poster="video/video1.png"></video>
<video src="video/video1.webm" id="html-player" style="width: 100%;" poster="video/video1.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......
This diff is collapsed.
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video10.webm" id="html-player" style="width: 100%;" poster="video/video10.png"></video>
<video src="video/video10.webm" id="html-player" style="width: 100%;" poster="video/video10.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -65,7 +65,7 @@
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
});
});
</script>
</html>
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video2.webm" id="html-player" style="width: 100%;"poster="video/video2.png"></video>
<video src="video/video2.webm" id="html-player" style="width: 100%;"poster="video/video2.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video3.webm" id="html-player" style="width: 100%;" poster="video/video3.png"></video>
<video src="video/video3.webm" id="html-player" style="width: 100%;" poster="video/video3.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video4.webm" id="html-player" style="width: 100%;" poster="video/video4.png"></video>
<video src="video/video4.webm" id="html-player" style="width: 100%;" poster="video/video4.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video5.webm" id="html-player" style="width: 100%;" poster="video/video5.png"></video>
<video src="video/video5.webm" id="html-player" style="width: 100%;" poster="video/video5.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -65,7 +65,7 @@
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
});
});
</script>
</html>
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video6.webm" id="html-player" style="width: 100%;" poster="video/video6.png"></video>
<video src="video/video6.webm" id="html-player" style="width: 100%;" poster="video/video6.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -65,7 +65,7 @@
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
});
});
</script>
</html>
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video7.webm" id="html-player" style="width: 100%;" poster="video/video7.png"></video>
<video src="video/video7.webm" id="html-player" style="width: 100%;" poster="video/video7.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -65,7 +65,7 @@
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
});
});
</script>
</html>
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video8.webm" id="html-player" style="width: 100%;" poster="video/video8.png"></video>
<video src="video/video8.webm" id="html-player" style="width: 100%;" poster="video/video8.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -65,7 +65,7 @@
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
});
});
</script>
</html>
video1.png
\ No newline at end of file
......@@ -4,7 +4,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video9.webm" id="html-player" style="width: 100%;" poster="video/video9.png"></video>
<video src="video/video9.webm" id="html-player" style="width: 100%;" poster="video/video9.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -65,7 +65,7 @@
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
});
});
</script>
</html>
video1.png
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment