{%- 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 -%}