From 02a6b991fec610aaf0992b0e4e03a1147644b765 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Thu, 9 Sep 2021 15:10:32 +0200
Subject: [PATCH] FIX: Correct the play icon position (#14295)

---
 app/assets/stylesheets/common/base/onebox.scss | 7 ++++++-
 lib/onebox/engine/google_photos_onebox.rb      | 4 ++--
 lib/onebox/engine/reddit_media_onebox.rb       | 6 +++---
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 72e29397986..368c7cf9c76 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -290,7 +290,12 @@ aside.onebox {
       }
     }
 
-    .instagram-video-icon {
+    .image-wrapper {
+      display: block;
+      position: relative;
+    }
+
+    .video-icon {
       &:before {
         opacity: 0.8;
         // ideally, the SVG used here should be in HTML and reference the SVG sprite
diff --git a/lib/onebox/engine/google_photos_onebox.rb b/lib/onebox/engine/google_photos_onebox.rb
index 3a07b7df699..6c930ce59cc 100644
--- a/lib/onebox/engine/google_photos_onebox.rb
+++ b/lib/onebox/engine/google_photos_onebox.rb
@@ -31,9 +31,9 @@ module Onebox
             <article class="onebox-body">
               <h3><a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener">#{og.title}</a></h3>
               <div class="aspect-image-full-size">
-                <a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener">
+                <a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener" class="image-wrapper">
                   <img src="#{og.secure_image_url}" class="scale-image"/>
-                  <span class="instagram-video-icon"></span>
+                  <span class="video-icon"></span>
                 </a>
               </div>
             </article>
diff --git a/lib/onebox/engine/reddit_media_onebox.rb b/lib/onebox/engine/reddit_media_onebox.rb
index c9d6cdcbff4..d479a6b6496 100644
--- a/lib/onebox/engine/reddit_media_onebox.rb
+++ b/lib/onebox/engine/reddit_media_onebox.rb
@@ -25,7 +25,7 @@ module Onebox
               </article>
             </aside>
           HTML
-        elsif  raw[:type] =~ /^video[\/\.]/
+        elsif raw[:type] =~ /^video[\/\.]/
           <<-HTML
             <aside class="onebox reddit">
               <header class="source">
@@ -35,9 +35,9 @@ module Onebox
               <article class="onebox-body">
                 <h3><a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener">#{raw[:title]}</a></h3>
                 <div class="aspect-image-full-size">
-                  <a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener">
+                  <a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener" class="image-wrapper">
                     <img src="#{raw[:image]}" class="scale-image"/>
-                    <span class="instagram-video-icon"></span>
+                    <span class="video-icon"></span>
                   </a>
                 </div>
                 <div class="description"><p>#{raw[:description]}</p></div>