[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>
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

View file

@ -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);
}
}

View file

@ -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) }}