zaclys/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng synced 2024-01-01 19:24:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

[mod] video result: replace HTML <iframe> by <video> tag

Browse source 
The HTML <video> tag reduces the bandwidth massively compared to the <iframe>.

When a video is embedded in a <iframe>, control over that video transfers to the
<iframe>.  The <iframe> downloads the entire video.  With the <video> tag,
control stays in the main frame and only the passages that the user chooses are
downloaded.

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2023-02-19 14:24:37 +01:00
parent 60e181607d
commit 464d1756f0
2 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
searx/static/themes/simple/src/less/style.less
View file

@ -387,7 +387,7 @@ article[data-vim-selected].category-social {
overflow: hidden; overflow: hidden;
} }
.result-videos .embedded-video iframe { .result-videos .embedded-video video {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
padding: 10px 0 0 0; padding: 10px 0 0 0;
@ -396,7 +396,7 @@ article[data-vim-selected].category-social {
@supports not (aspect-ratio: 1 / 1) { @supports not (aspect-ratio: 1 / 1) {
// support older browsers which do not have aspect-ratio // support older browsers which do not have aspect-ratio
// https://caniuse.com/?search=aspect-ratio // https://caniuse.com/?search=aspect-ratio
.result-videos .embedded-video iframe { .result-videos .embedded-video video {
height: calc(@results-width * 9 / 16); height: calc(@results-width * 9 / 16);
} }
} }

4
searx/templates/simple/result_templates/videos.html
View file

@ -18,7 +18,9 @@
{{- result_sub_footer(result, proxify) -}} {{- result_sub_footer(result, proxify) -}}
{% if result.iframe_src -%} {% if result.iframe_src -%}
<div id="result-video-{{ index }}" class="embedded-video invisible"> <div id="result-video-{{ index }}" class="embedded-video invisible">
<iframe data-src="{{result.iframe_src}}" frameborder="0" allowfullscreen></iframe> <video controls>
<source src="{{result.iframe_src}}">
</video>
</div> </div>
{%- endif %} {%- endif %}
{{ result_footer(result) }} {{ result_footer(result) }}