Merge pull request #882 from return42/fix-873

[fix] replace embedded HTML by data_src

2 files changed, 44 insertions, 0 deletions

diff --git a/searx/static/themes/simple/src/less/embedded.less b/searx/static/themes/simple/src/less/embedded.less
new file mode 100644
index 000000000..4a43ea78d
--- /dev/null
+++ b/searx/static/themes/simple/src/less/embedded.less
@@ -0,0 +1,19 @@
+iframe[src^="https://w.soundcloud.com"] {
+  height: 120px;
+}
+
+iframe[src^="https://www.deezer.com"] {
+  // The real size is 92px, but 94px are needed to avoid an inner scrollbar of
+  // the embedded HTML.
+  height: 94px;
+}
+
+iframe[src^="https://www.mixcloud.com"] {
+  // the embedded player from mixcloud has some quirks: initial there is an
+  // issue with an image URL that is blocked since it is an a Cross-Origin
+  // request. The alternative text (<img alt='Mixcloud Logo'> then cause an
+  // scrollbar in the inner of the iframe we can't avoid.  Another quirk comes
+  // when pressing the play button, somtimes the shown player has an height of
+  // 200px, somtimes 250px.
+  height: 250px;
+}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 59b74aabe..692d9e7c0 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -17,6 +17,7 @@
 @import "autocomplete.less";
 @import "detail.less";
 @import "animations.less";
+@import "embedded.less";
 
 // for index.html template
 @import "index.less";
@@ -296,10 +297,34 @@ article[data-vim-selected].category-social {
   padding: 0 5px 25px 0 !important;
 }
 
+.audio-control audio {
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+
+.embedded-content iframe {
+  width: 100%;
+  padding: 10px 0 0 0;
+}
+
 .result-videos .content {
   overflow: hidden;
 }
 
+.result-videos .embedded-video iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 10px 0 0 0;
+}
+
+@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 {
+    height: calc(@results-width * 9 / 16);
+  }
+}
+
 .engines {
   .ltr-float-right();
   color: var(--color-result-engines-font);