<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>$page_title</title> <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet"> <link href="/youtube.com/comments.css" type="text/css" rel="stylesheet"> <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml"> <style type="text/css"> main{ display:grid; grid-template-columns: 3fr 2fr; } #left{ background-color:#bcbcbc; display: grid; grid-column: 1; grid-row: 1; grid-template-columns: 1fr 640px; } .full-item{ grid-column: 2; } .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; } .comments{ grid-column: 1 / span 2; grid-row: 6; margin-top:10px; } .more-comments{ grid-column: 1 / span 2; } #right{ background-color:#cccccc; grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 40px 500px 1fr; } #related{ grid-column: 2; 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; } .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; } </style> </head> <body> $header <main> <div id="left"> <article class="full-item"> <video width="640" height="360" controls autofocus> $video_sources </video> <h2 class="title">$video_title</h2> <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"> $download_options </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"> $music_list </div> <section class="comments"> $comments </section> $more_comments_button </article> </div> <div id="right"> <nav id="related"> $related </nav> </div> </main> </body> </html>