Embed player responsive

author Chocobozzz <florian.bigard@gmail.com>

Mon, 11 Dec 2017 09:26:29 +0000 (10:26 +0100)

committer Chocobozzz <florian.bigard@gmail.com>

Mon, 11 Dec 2017 09:26:29 +0000 (10:26 +0100)
author Chocobozzz <florian.bigard@gmail.com>
Mon, 11 Dec 2017 09:26:29 +0000 (10:26 +0100)
committer Chocobozzz <florian.bigard@gmail.com>
Mon, 11 Dec 2017 09:26:29 +0000 (10:26 +0100)
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss

index fe9495e777c7907a9ccc59d38811146d8a822cd0..1c5701bea215433c031c3bd5bc9fab73e1519751 100644 (file)
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -23,6 +23,7 @@ $control-bar-height: 34px;
    }
  
    .vjs-big-play-button {
+    outline: 0;
      font-size: 8em;
  
      $big-play-width: 3em;
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html

index 0a35bc362d3f84c87480b02a7da1142c3c05cb30..fa4d0bdba52c48a2fbccad254a4f8f9f55b70084 100644 (file)
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -11,7 +11,7 @@
  
    <body>
  
-    <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered">
+    <video id="video-container" class="video-js vjs-peertube-skin">
      </video>
  
    </body>
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss

index b76f096775cead75fc01c3e9da3b8d97bc602bf0..9140cd37c2b2f937af0799b149cd04d9f6b77331 100644 (file)
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -23,17 +23,13 @@ html, body {
  }
  
  .vjs-peertube-link {
-  color: white;
+  color: #fff;
    text-decoration: none;
-  font-size: 1.3em;
-  line-height: 2.20;
+  font-size: $font-size;
+  line-height: $control-bar-height;
    transition: all .4s;
-  position: relative;
-  right: 8px;
-}
-
-.vjs-resolution-button-label {
-  left: -7px;
+  font-weight: $font-semibold;
+  margin-right: 3px;
  }
  
  .vjs-peertube-link:hover {
@@ -42,5 +38,21 @@ html, body {
  
  // Fix volume panel because we added a new component (PeerTube link)
  .vjs-volume-panel {
-  margin-right: 130px !important;
+  margin-right: 121px !important;
+}
+
+@media screen and (max-width: 350px) {
+  .vjs-play-control {
+    padding: 0 5px !important;
+    width: 25px !important;
+  }
+
+  .vjs-volume-control {
+    display: none !important;
+  }
+
+  .vjs-volume-panel {
+    width: 26px !important;
+    margin-right: 140px !important;
+  }
  }
author	Chocobozzz <florian.bigard@gmail.com>
	Mon, 11 Dec 2017 09:26:29 +0000 (10:26 +0100)
committer	Chocobozzz <florian.bigard@gmail.com>
	Mon, 11 Dec 2017 09:26:29 +0000 (10:26 +0100)
client/src/sass/video-js-custom.scss		patch \| blob \| blame \| history
client/src/standalone/videos/embed.html		patch \| blob \| blame \| history
client/src/standalone/videos/embed.scss		patch \| blob \| blame \| history