<!DOCTYPE html>
<html>
    <head>
        <title>{{ title }}</title>
        <meta charset="utf-8">
        <meta content="utf-8" http-equiv="encoding">
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../CSS/video.css" rel="stylesheet" type="text/css">
        <link href="../CSS/ted.css" rel="stylesheet" type="text/css">
        <script src="../JS/video.js"></script>
        <style type="text/css">
           body {background: {{ background_color }};}
        </style>
    </head>
    <body>
        <div id="content">
            <a href="../index.html"><img id="backtolist" src="../CSS/img/header_profile.png" title="Back to the list" /></a>
            <p id="speaker">{{ author }}</p>
            <p id="title">{{ title }}</p>
            <video class="video-js vjs-default-skin" controls preload="auto" width="480px" height="270px" data-setup='{"autoplay": true, "preload": "true"}' >
                <source src="video.webm" type="video/webm" />
                {% for language in vtt %}
                    <track kind="subtitles" src="{{ language.code }}.vtt" srclang="{{ language.code }}" label="{{ language.name }}" />
                {% endfor %}
            </video>
            <div id="description">
            	<p id="description">{{ description }}</p>
            </div>
            <div id="date">{{ date }}</div>
        </div>
    </body>
</html>
