{% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% import "comments.html" as comments %} {% block page_title %}{{ title }}{% endblock %} {% block style %} main{ display:grid; grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); background-color:#cccccc; } #left{ background-color:#bcbcbc; grid-column: 1; } .full-item{ display: grid; grid-column: 2; grid-template-rows: 0fr 0fr 0fr 0fr 20px 0fr 0fr; grid-template-columns: 1fr 1fr; align-content: start; background-color:#bcbcbc; } .full-item > video{ grid-column: 1 / span 2; grid-row: 1; } .full-item > .title{ grid-column: 1 / span 2; grid-row:2; min-width: 0; } .full-item > .is-unlisted{ background-color: #d0d0d0; justify-self:start; padding-left:2px; padding-right:2px; } .full-item > address{ grid-column: 1; grid-row: 4; justify-self: start; } .full-item > .views{ grid-column: 2; grid-row: 4; justify-self:end; } .full-item > time{ grid-column: 1; grid-row: 5; justify-self:start; } .full-item > .likes-dislikes{ grid-column: 2; grid-row: 5; justify-self:end; } .full-item > .download-dropdown{ grid-column:1; grid-row: 6; } .full-item > .checkbox{ justify-self:end; grid-row: 6; grid-column: 2; } .full-item > .description{ background-color:#d0d0d0; margin-top:8px; white-space: pre-wrap; min-width: 0; word-wrap: break-word; grid-column: 1 / span 2; grid-row: 7; } .full-item .music-list{ grid-row:8; grid-column: 1 / span 2; } .full-item .comments-area{ grid-column: 1 / span 2; grid-row: 9; margin-top:10px; } .comment{ width:640px; } .music-list{ background-color: #d0d0d0; } .music-list table,th,td{ border: 1px solid; } .music-list th,td{ padding-left:4px; padding-right:5px; } .music-list caption{ text-align:left; font-weight:bold; margin-bottom:5px; } #related{ grid-column: 4; display: grid; grid-auto-rows: 90px; grid-row-gap: 10px; } #related .medium-item{ grid-template-columns: 160px 1fr 0fr; } .download-dropdown{ z-index:1; justify-self:start; min-width:0px; height:0px; } .download-dropdown-label{ background-color: #e9e9e9; border-style: outset; border-width: 2px; font-weight: bold; } .download-dropdown-content{ display:none; background-color: #e9e9e9; } .download-dropdown:hover .download-dropdown-content { display: grid; grid-auto-rows:30px; padding-bottom: 50px; } .download-dropdown-content a{ white-space: nowrap; display:grid; grid-template-columns: 60px 90px auto; max-height: 1.2em; } {% endblock style %} {% block main %} <div id="left"> </div> <article class="full-item"> <video width="640" height="360" controls autofocus> {% for video_source in video_sources %} <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}"> {% endfor %} {% for source in subtitle_sources %} {% if source['on'] %} <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default> {% else %} <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}"> {% endif %} {% endfor %} </video> <h2 class="title">{{ title }}</h2> {% if unlisted %} <span class="is-unlisted">Unlisted</span> {% endif %} <address>Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address> <span class="views">{{ views }} views</span> <time datetime="$upload_date">Published on {{ upload_date }}</time> <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span> <div class="download-dropdown"> <button class="download-dropdown-label">Download</button> <div class="download-dropdown-content"> {% for format in download_formats %} <a href="{{ format['url'] }}"> <span>{{ format['ext'] }}</span> <span>{{ format['resolution'] }}</span> <span>{{ format['note'] }}</span> </a> {% endfor %} </div> </div> <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox"> <span class="description">{{ description }}</span> <div class="music-list"> {% if music_list.__len__() != 0 %} <hr> <table> <caption>Music</caption> <tr> {% for attribute in music_attributes %} <th>{{ attribute }}</th> {% endfor %} </tr> {% for track in music_list %} <tr> {% for attribute in music_attributes %} <td>{{ track.get(attribute.lower(), '') }}</td> {% endfor %} </tr> {% endfor %} </table> {% endif %} </div> {% if comments_info %} {{ comments.video_comments(comments_info) }} {% endif %} </article> <nav id="related"> {% for info in related %} {{ common_elements.item(info) }} {% endfor %} </nav> {% endblock main %}