1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
{%- extends "vidframe/base_vidframe.xhtml" -%}
{%- block style %}
body {
background-color: black;
}
a {
position: absolute;
top: 0;
left: 0;
}
img.thumb {
opacity: 0.5;
}
div.playbutton {
opacity: 1.0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
svg {
position: absolute;
fill: #fff;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
div.playbutton:hover svg,
div.playbutton:focus svg {
fill: #17e617;
}
{% endblock -%}
{%- block video %}
<div class="playbutton">
<a href="{%- block vidlink -%}{%- endblock -%}">
<img class="thumb" src="{%- block thumbnail -%}{%- endblock -%}"
alt="Click to load video"
width="100%"
height="100%" />
<svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 311.69 311.69">
<svg:path d="M155.84,0A155.85,155.85,0,1,0,311.69,155.84,155.84,155.84,0,0,0,155.84,
0Zm0,296.42A140.58,140.58,0,1,1,296.42,155.84,140.58,140.58,0,0,1,155.84,296.42Z"/>
<svg:polygon points="218.79 155.84 119.22 94.34 119.22 217.34 218.79 155.84"/>
</svg:svg>
</a>
</div>
{% endblock -%}
|
