{% 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' }} } 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 %} /* This is the constant aspect ratio trick Percentages in padding-top declarations are based on the width of the parent element. We can use this trick to achieve a constant aspect ratio for video-container-inner by setting height to 0. So the video height will decrease if the browser window is narrow, but it will keep same aspect ratio. Must use absolute positioning on video to keep it inside its container since the container's height is 0. However, because we widen the video player longer than the video's intrinsic width for long video to make scrubbing easier, we can't use the aspect ratio to set the height. The height needs to be the intrinsic height in these cases. So we use a media query so aspect ratio trick is only used if page width is less than or equal to intrinsic video width. */ #video-container{ grid-column: 1 / span 5; justify-self: center; max-width: 100%; width: calc(var(--theater_video_target_width)*1px); margin-bottom: 10px; --plyr-video-background: rgba(0, 0, 0, 0); } #video-container-inner{ height: calc(var(--video_height)*1px); position: relative; } @media(max-width:{{ video_width }}px){ #video-container-inner{ padding-top: calc(100%*var(--video_height)/var(--video_width)); height: 0px; } } video{ background-color: var(--video-background-color); } #video-container-inner > video, #video-container-inner > .plyr{ position: absolute; top: 0px; left: 0px; 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-container-inner, 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 %}