Commit da290785 authored by Jonas Heinrich's avatar Jonas Heinrich

added video overview thumbnails

parent 298c87bd
......@@ -6,6 +6,10 @@ body {
color: white;
}
p {
margin: 0px;
}
.container {
height:100vh;
display: grid;
......@@ -61,7 +65,7 @@ map {
}
.description {
padding: 15px 60px 15px 60px;
padding: 15px 60px;
}
h2 {
......@@ -72,52 +76,6 @@ h2 {
padding-bottom: 5px;
}
@media screen and (max-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px auto 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
"logo"
"navigation"
"map"
"content"
;
}
content {
overflow-y: inherit;
}
.burger_menu {
display: block;
float:right;
width: 30px;
height: 25px;
margin: 18px;
}
}
/* .avatar-frame,.avatar-frame img{
width: 100px;
height: 100px;
border-radius: 60px;
} */
.grid__item {
position: relative;
width: 25%;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 2em;
}
.grid {
display: flex;
flex-wrap: wrap;
......@@ -127,6 +85,16 @@ h2 {
padding: 1.5em 0 1em;
text-align: center;
user-select: none;
justify-content: center;
}
.grid__item {
position: relative;
width: 27%;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 2em;
}
.profile-img {
......@@ -182,3 +150,45 @@ h1, h2, h3, h4, h5, h6 {
color: #7f7f7f;
color: rgba(255,255,255,.5);
}
@media screen and (max-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px auto 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
"logo"
"navigation"
"map"
"content"
;
}
content {
overflow-y: inherit;
}
.burger_menu {
display: block;
float:right;
width: 30px;
height: 25px;
margin: 18px;
}
.description {
padding: 15px 20px;
}
.grid__item {
position: relative;
width: 30%;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 2em;
}
}
#video_item {
width: 100%;
display: inline-block;
position: relative;
margin: 10px 0px 0px 0px;
border: 1px solid rgba(255,255,255,0.25);
}
#video_item .video_thumb {
width: 70px;
height: 70px;
float: left;
position: relative;
margin-right: 10px;
}
#video_item .video_overlay {
visibility: visible;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0.7;
background-image: url('../images/controller-play.svg');
background-repeat: no-repeat;
background-position: 15px;
background-size: 50px;
}
#video_item:hover {
background: rgba(255,255,255,0.10);
}
#video_item .video_title {
padding: 5px;
font-size: 18px;
line-height: 20px;
}
#video_item .video_description {
}
.small {
color: rgba(255,255,255,.5);
font-size: 12px;
}
#video_item .video_duration {
float: right;
margin-right: 5px;
}
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path fill="#FFFFFF" d="M15,10.001c0,0.299-0.305,0.514-0.305,0.514l-8.561,5.303C5.51,16.227,5,15.924,5,15.149V4.852 c0-0.777,0.51-1.078,1.135-0.67l8.561,5.305C14.695,9.487,15,9.702,15,10.001z"/>
</svg>
\ No newline at end of file
......@@ -6,6 +6,7 @@
<title>Ausstellung-Virtuell | Folge und Varianz</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/player.css">
<link rel="stylesheet" type="text/css" href="css/overview.css">
<script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
</head>
......@@ -32,12 +33,10 @@
<div class="overlay"></div>
<video id="video" width="100%" height="100%" poster="images/video1_poster.png">
<!-- Video here -->
<source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
<p>Error: your browser doesn't support HTML5 video.</p>
</video>
<!-- Markup to replace default interface -->
<div id="video-controls">
<div class="controls">
<button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
......
......@@ -5,3 +5,11 @@ $( "#overview" ).click(function() {
$( "#about" ).click(function() {
$( "content" ).load( "about.html" );
});
$("#video_item").mouseenter(function() {
$(".video_overlay").show();
});
$("#video_item").mouseleave(function() {
$(".video_overlay").show();
});
......@@ -8,19 +8,25 @@
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
<section class="overview">
<span class="overview_item">
<img src="images/video1_poster.png">
Titel
Beschreibung
Länge
</span>
</section>
<br><br>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Form und Farbe 1</p>
<p class="video_description small">Form follows function 1</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Form und Farbe 1</p>
<p class="video_description small">Form follows function 1</p>
<p class="video_duration small">00:31:00</p>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
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