fix caption on video
This commit is contained in:
parent
d3c0e1e466
commit
ef199a5d52
@ -256,7 +256,7 @@ footer a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.share, .author {
|
.share, .author-meta {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -310,25 +310,30 @@ a.google {
|
|||||||
background-position: -172px 0 !important;
|
background-position: -172px 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author img.circle {
|
.author-meta img.circle {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author {
|
.author-meta {
|
||||||
padding-bottom: 7em;
|
padding-bottom: 7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-meta {
|
.author-info {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author h4 {
|
.author-info h4 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'crimson', serif;
|
||||||
|
color: black;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.author .desc {
|
.author-info .desc {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
@ -343,7 +348,7 @@ a.google {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 2;
|
z-index: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,14 @@
|
|||||||
{% set image = Image(section.image) %}
|
{% set image = Image(section.image) %}
|
||||||
{{ image.copy() }}
|
{{ image.copy() }}
|
||||||
<div class="author">
|
<div class="author-meta">
|
||||||
<img src={{ image.generate_thumbnail("200x200") }} alt="" class="circle">
|
<img src={{ image.generate_thumbnail("200x200") }} alt="" class="circle">
|
||||||
<div>
|
<div>
|
||||||
<span class=author-meta>Story by</span>
|
<span class=author-info>Story by
|
||||||
<h4>{{ section.name }}</h4>
|
<h4>{{ section.name }}</h4>
|
||||||
{% if section.text %}
|
{% if section.text %}
|
||||||
<div class=desc>{{ section.text }}</div>
|
<div class=desc>{{ section.text }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<div class="pictures-line">
|
<div class="pictures-line">
|
||||||
{% for image in line %}
|
{% for image in line %}
|
||||||
{% if image.type == "video" %}
|
{% if image.type == "video" %}
|
||||||
|
{% set caption = image.text %}
|
||||||
{% set video = Video(image) %}
|
{% set video = Video(image) %}
|
||||||
{{ video.copy() }}
|
{{ video.copy() }}
|
||||||
{% else %}
|
{% else %}
|
||||||
@ -19,6 +20,11 @@
|
|||||||
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||||
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
||||||
</video>
|
</video>
|
||||||
|
{% if caption %}
|
||||||
|
<div class="caption__overlay">
|
||||||
|
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
{% set video = "" %}
|
{% set video = "" %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
|
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user