Improve embed title background opacity

2 files changed, 8 insertions, 2 deletions

diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 0c2359ac7..935a60b49 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,7 +1,7 @@
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
-$primary-background-color: #000;
+$primary-background-color: rgba(0, 0, 0, 0.8);
 
 $font-size: 13px;
 $control-bar-height: 34px;
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index e80853861..f80106428 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -21,6 +21,12 @@ body {
 
   .vjs-dock-text {
     padding-right: 10px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
+  }
+
+  .vjs-dock-title,
+  .vjs-dock-description {
+    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
   }
 
   .vjs-dock-description {
@@ -55,7 +61,7 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    border: 4px solid #fff;
+    border: 2px solid #fff;
     border-radius: 100%;
 
     left: 50%;