aboutsummaryrefslogtreecommitdiffstats
path: root/yt_watch_template.html
blob: f78f7e848d071cc585227795ea249b2acbd4c40a (plain)
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!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;                   
                }
                .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;
                    }
        </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="dropdown">
                        <button class="dropdown-label">Download</button>
                        <div class="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>
                    
                    <section class="comments">
$comments
                    </section>
$more_comments_button
                </article>
            </div>
            
            
            <div id="right">
                <nav id="related">
$related
                </nav>
            </div>
        </main>
    
    
    
    
    
    </body>
</html>