heckyel/yt-local
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix video height not scaling down when browser window is narrow

Browse Source 
This solution still makes sure the video doesn't jump in height
when it loads, and makes it so the video scales down properly in
aspect ratio as the browser window is made narrower.
This commit is contained in:
James Taylor 2020-10-01 13:38:57 -07:00
parent 42e72395c0
commit 9123d9a6cf
2 changed files with 56 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
youtube/templates/watch.html
View File

@ -49,14 +49,47 @@
}
{% if settings.theater_mode %}
video{
/* 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: {{ theater_video_target_width }}px;
margin-bottom: 10px;
background-color: var(--video-background-color);
}
#video-container-inner{
height: {{ video_height}}px;
position: relative;
}
@media(max-width:{{ video_width }}px){
#video-container-inner{
padding-top: calc(100%*{{video_height}}/{{video_width}});
height: 0px;
}
}
video{
background-color: var(--video-background-color);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.side-videos{
grid-row: 2 /span 3;
width: 400px;
@ -65,10 +98,12 @@
width: 640px;
}
{% else %}
video{
#video-container{
grid-column: 2;
}
#video-container, #video-container-inner, video{
height: 360px;
width: 640px;
grid-column: 2;
}
.side-videos{
grid-row: 1 /span 4;
@ -340,20 +375,24 @@ Reload without invidious (for usage of new identity button).</a>
</ol>
</div>
{% else %}
<video controls autofocus class="video" height="{{ video_height }}px">
{% for video_source in video_sources %}
<source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
{% endfor %}
<div id="video-container">
<div id="video-container-inner">
<video controls autofocus class="video" height="{{ video_height }}px">
{% 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 %}
{% 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>
</video>
</div>
</div>
{% if time_start != 0 %}
<script>
document.querySelector('video').currentTime = {{ time_start|tojson }};

1
youtube/watch.py
View File

@ -473,6 +473,7 @@ def get_watch_page(video_id=None):
settings = settings,
video_height = video_height,
video_width = video_width,
theater_video_target_width = theater_video_target_width,
title = info['title'],