From 464d1756f02ac2d20df5f665e246a202cb2710c1 Mon Sep 17 00:00:00 2001
From: Markus Heiser <markus.heiser@darmarit.de>
Date: Sun, 19 Feb 2023 14:24:37 +0100
Subject: [PATCH] [mod] video result: replace HTML <iframe> by <video> tag

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>
---
 searx/static/themes/simple/src/less/style.less      | 4 ++--
 searx/templates/simple/result_templates/videos.html | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 962dbeba0..669544a06 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -387,7 +387,7 @@ article[data-vim-selected].category-social {
   overflow: hidden;
 }
 
-.result-videos .embedded-video iframe {
+.result-videos .embedded-video video {
   width: 100%;
   aspect-ratio: 16 / 9;
   padding: 10px 0 0 0;
@@ -396,7 +396,7 @@ article[data-vim-selected].category-social {
 @supports not (aspect-ratio: 1 / 1) {
   // support older browsers which do not have aspect-ratio
   // https://caniuse.com/?search=aspect-ratio
-  .result-videos .embedded-video iframe {
+  .result-videos .embedded-video video {
     height: calc(@results-width * 9 / 16);
   }
 }
diff --git a/searx/templates/simple/result_templates/videos.html b/searx/templates/simple/result_templates/videos.html
index 969f87a4d..3ca50024b 100644
--- a/searx/templates/simple/result_templates/videos.html
+++ b/searx/templates/simple/result_templates/videos.html
@@ -18,7 +18,9 @@
 {{- result_sub_footer(result, proxify) -}}
 {% if result.iframe_src -%}
 <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>
 {%- endif %}
 {{ result_footer(result) }}