{% set page_title = title %} {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% import "comments.html" as comments with context %} {% block style %} body { --theater_video_target_width: {{ theater_video_target_width }}; --video_height: {{ video_height }}; --video_width: {{ video_width }}; --plyr-control-spacing-num: {{ '3' if video_height < 240 else '10' }}; --screen-width: calc(100vw - 25px); } details > summary{ background-color: var(--interface-color); border-style: outset; border-width: 2px; font-weight: bold; padding: 4px; } details > summary:hover{ text-decoration: underline; } .playability-error{ height: 360px; max-width: 640px; grid-column: 2; background-color: var(--video-background-color); text-align:center; } .playability-error span{ position: relative; top: 50%; transform: translate(-50%, -50%); white-space: pre-wrap; } .live-url-choices{ min-height: 360px; max-width: 640px; grid-column: 2; background-color: var(--video-background-color); padding: 25px 0px 0px 25px; } .live-url-choices ol{ list-style: none; padding:0px; margin:0px; margin-top: 15px; } .live-url-choices input{ max-width: 400px; width: 100%; } .url-choice-label{ display: inline-block; width: 150px; } {% if settings.theater_mode %} #video-container{ grid-column: 1 / span 5; justify-self: center; max-width: 100%; max-height: calc(var(--screen-width)*var(--video_height)/var(--video_width)); height: calc(var(--video_height)*1px); width: calc(var(--theater_video_target_width)*1px); margin-bottom: 10px; --plyr-video-background: rgba(0, 0, 0, 0); } /* Really just want this as another max-height variable in #video-container, but have to use media queries instead because min is only supported by newer browsers: https://stackoverflow.com/questions/30568424/min-max-width-height-with-multiple-values Because CSS is extra special, we cannot change this max-height value using javascript when the video resolution is changed, so we use this technique: https://stackoverflow.com/a/39610272 */ {% set heights = [] %} {% for src in uni_sources+pair_sources %} {% if src['height'] not in heights %} {% do heights.append(src['height']) %} @media(max-height:{{ src['height'] + 50 }}px){ #video-container.h{{ src['height'] }}{ height: calc(100vh - 50px); /* 50px is height of header */ } } {% endif %} {% endfor %} video{ background-color: var(--video-background-color); } #video-container > video, #video-container > .plyr{ width: 100%; height: 100%; } .side-videos{ grid-row: 2 /span 3; max-width: 400px; } .video-info{ max-width: 640px; } {% else %} #video-container{ grid-column: 2; } #video-container, video{ height: calc(640px*var(--video_height)/var(--video_width)) !important; width: 640px !important; } .plyr { height: 100%; width: 100%; } .side-videos{ grid-row: 1 /span 4; } {% endif %} main{ display:grid; /* minmax(0, 1fr) needed instead of 1fr for Chrome: https://stackoverflow.com/a/43312314 */ grid-template-columns: minmax(0, 1fr) 640px 40px 400px minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-content: start; padding-left: 0px; padding-right: 0px; } .video-info{ grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; align-content: start; grid-template-areas: "v-title v-title" "v-labels v-labels" "v-uploader v-views" "v-date v-likes-dislikes" "external-player-controls v-checkbox" "v-direct-link v-direct-link" "v-download v-download" "v-description v-description" "v-music-list v-music-list" "v-more-info v-more-info"; } .video-info > .title{ grid-area: v-title; min-width: 0; } .video-info > .labels{ grid-area: v-labels; justify-self:start; list-style: none; padding: 0px; margin: 5px 0px; } .video-info > .labels:empty{ margin: 0px; } .labels > li{ display: inline; margin-right:5px; background-color: var(--interface-color); padding: 2px 5px; border-style: solid; border-width: 1px; } .video-info > address{ grid-area: v-uploader; justify-self: start; } .video-info > .views{ grid-area: v-views; justify-self:end; } .video-info > time{ grid-area: v-date; justify-self:start; } .video-info > .likes-dislikes{ grid-area: v-likes-dislikes; justify-self:end; } .video-info > .external-player-controls{ grid-area: external-player-controls; justify-self: start; margin-bottom: 8px; } #speed-control{ width: 65px; text-align: center; background-color: var(--interface-color); color: var(--text-color); } .video-info > .checkbox{ grid-area: v-checkbox; justify-self:end; align-self: start; height: 25px; width: 25px; } .video-info > .direct-link{ grid-area: v-direct-link; margin-bottom: 8px; } .video-info > .download-dropdown{ grid-area: v-download; } .video-info > .description{ background-color:var(--interface-color); margin-top:8px; white-space: pre-wrap; min-width: 0; word-wrap: break-word; grid-area: v-description; padding: 5px; } .music-list{ grid-area: v-music-list; background-color: var(--interface-color); padding-bottom: 7px; } .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; } .more-info{ grid-area: v-more-info; background-color: var(--interface-color); } .more-info > summary{ font-weight: normal; border-width: 1px 0px; border-style: solid; } .more-info-content{ padding: 5px; } .more-info-content p{ margin: 8px 0px; } .comments-area-outer{ grid-column: 2; grid-row: 3; margin-top:10px; } .comments-disabled{ background-color: var(--interface-color); padding: 5px; font-weight: bold; } .comments-area-inner{ padding-top: 10px; } .comment{ max-width:640px; } .side-videos{ list-style: none; grid-column: 4; max-width: 640px; } #transcript-details{ margin-bottom: 10px; } table#transcript-table { border-collapse: collapse; width: 100%; } table#transcript-table td, th { border: 1px solid #dddddd; } div#transcript-div { background-color: var(--interface-color); padding: 5px; } .playlist{ border-style: solid; border-width: 2px; border-color: lightgray; margin-bottom: 10px; } .playlist-header{ background-color: var(--interface-color); padding: 3px; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: lightgray; } .playlist-header h3{ margin: 2px; } .playlist-metadata{ list-style: none; padding: 0px; margin: 0px; } .playlist-metadata li{ display: inline; margin: 2px; } .playlist-videos{ height: 300px; overflow-y: scroll; display: grid; grid-auto-rows: 90px; grid-row-gap: 10px; padding-top: 10px; } .autoplay-toggle-container{ margin-bottom: 10px; } .related-videos-inner{ padding-top: 10px; display: grid; grid-auto-rows: 90px; grid-row-gap: 10px; } .thumbnail-box{ /* overides rule in shared.css */ height: 90px !important; width: 120px !important; } .download-dropdown-content{ background-color: var(--interface-color); padding: 10px; list-style: none; margin: 0px; } li.download-format{ margin-bottom: 7px; } .download-link{ display: block; background-color: rgba(var(--link-color-rgb), 0.07); } .download-link:visited{ background-color: rgba(var(--visited-link-color-rgb), 0.07); } .format-attributes{ list-style: none; padding: 0px; margin: 0px; display: flex; flex-direction: row; flex-wrap: wrap; } .format-attributes li{ white-space: nowrap; max-height: 1.2em; } .format-ext{ width: 60px; } .format-video-quality{ width: 140px; } .format-audio-quality{ width: 120px; } .format-file-size{ width: 80px; } .format-codecs{ } /* Put related vids below videos when window is too small */ /* 1100px instead of 1080 because W3C is full of idiots who include scrollbar width */ @media (max-width:1100px){ main{ grid-template-columns: minmax(0, 1fr) 640px 0 minmax(0, 1fr); } .side-videos{ margin-top: 10px; grid-column: 2; grid-row: 3; width: initial; } .comments-area-outer{ grid-row: 4; } } @media (max-width:660px){ main{ grid-template-columns: 5px minmax(0, 1fr) 0 5px; } .format-attributes{ display: grid; grid-template-columns: repeat(auto-fill, 140px); } .format-codecs{ grid-column: auto / span 2; } } @media (max-width:500px){ .video-info{ grid-template-areas: "v-title v-title" "v-labels v-labels" "v-uploader v-uploader" "v-date v-date" "v-views v-views" "v-likes-dislikes v-likes-dislikes" "external-player-controls v-checkbox" "v-direct-link v-direct-link" "v-download v-download" "v-description v-description" "v-music-list v-music-list" "v-more-info v-more-info"; } .video-info > .views{ justify-self: start; } .video-info > .likes-dislikes{ justify-self: start; } } {% endblock style %} {% block head %} {% if settings.video_player == 1 %} {% endif %} {% endblock head %} {% block main %} {% if playability_error %}
{{ 'Error: ' + playability_error }} {% if invidious_reload_button %}
Reload without invidious (for usage of new identity button).
{% endif %}
{% elif (uni_sources.__len__() == 0 or live) and hls_formats.__len__() != 0 %}
Copy a url into your video player:
    {% for fmt in hls_formats %}
  1. {{ fmt['video_quality'] }}:
  2. {% endfor %}
{% else %}
{% endif %}

{{ title }}

Uploaded by {{ uploader }}
{{ view_count }} views {{ like_count }} likes {{ dislike_count }} dislikes
{% if settings.video_player == 0 %} {% endif %}
Direct Link
Download
{{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }}
{% if music_list.__len__() != 0 %}
{% for attribute in music_attributes %} {% endfor %} {% for track in music_list %} {% for attribute in music_attributes %} {% if attribute.lower() == 'title' and track['url'] is not none %} {% else %} {% endif %} {% endfor %} {% endfor %}
Music
{{ attribute }}
{{ track.get(attribute.lower(), '') }}{{ track.get(attribute.lower(), '') }}
{% endif %}
More info

Tor exit node: {{ ip_address }}

{% if invidious_used %}

Used Invidious as fallback.

{% endif %}

Allowed countries: {{ allowed_countries|join(', ') }}

{% if settings.use_sponsorblock_js %}
{% endif %}
{% if playlist %}

{{ playlist['title'] }}

{% elif settings.related_videos_mode != 0 %}
{% endif %} {% if subtitle_sources %}
Transcript
{% endif %} {% if settings.related_videos_mode != 0 %} {% endif %}
{% if settings.comments_mode != 0 %} {% if comments_disabled %}
Comments disabled
{% else %}
{{ comment_count|commatize }} comment{{'s' if comment_count != '1' else ''}}
{% if comments_info %} {{ comments.video_comments(comments_info) }} {% endif %}
{% endif %} {% endif %} {% if settings.video_player == 1 %} {% endif %} {% if settings.use_video_hotkeys %} {% endif %} {% if settings.use_comments_js %} {% endif %} {% if settings.use_sponsorblock_js %} {% endif %} {% endblock main %}