diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 61b440859..5fa31ec63 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -602,6 +602,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
startTime,
stopTime: urlOptions.stopTime,
+ controlBar: urlOptions.controlBar,
controls: urlOptions.controls,
muted: urlOptions.muted,
loop: urlOptions.loop,
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 7ff62e128..67ca56516 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -250,8 +250,8 @@
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index 6c0d4a039..e0c98008c 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -27,7 +27,7 @@ type Customizations = {
onlyEmbedUrl: boolean
title: boolean
warningTitle: boolean
- controls: boolean
+ controlBar: boolean
peertubeLink: boolean
}
@@ -88,7 +88,7 @@ export class VideoShareComponent {
onlyEmbedUrl: false,
title: true,
warningTitle: true,
- controls: true,
+ controlBar: true,
peertubeLink: true
}, {
set: (target, prop, value) => {
@@ -190,7 +190,7 @@ export class VideoShareComponent {
? {
title: this.customizations.title,
warningTitle: this.customizations.warningTitle,
- controls: this.customizations.controls,
+ controlBar: this.customizations.controlBar,
peertubeLink: this.customizations.peertubeLink,
// If using default value, we don't need to specify it
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 1b2a67c77..b24b6966e 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -110,6 +110,7 @@ export class PeertubePlayerManager {
if (isMobile()) player.peertubeMobile()
if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
+ if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
player.bezels()
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts
index 456ef115e..a6f00876f 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/manager-options.ts
@@ -21,6 +21,8 @@ export interface CustomizationOptions {
stopTime: number | string
controls?: boolean
+ controlBar?: boolean
+
muted?: boolean
loop?: boolean
subtitle?: string
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 9b35c6cb2..56102d3fb 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -4,6 +4,10 @@
@use './_player-variables' as *;
.video-js.vjs-peertube-skin .vjs-control-bar {
+ &.control-bar-hidden {
+ display: none !important;
+ }
+
z-index: 100;
height: $control-bar-height;
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index c0af1dfb3..1fc8e229b 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -37,7 +37,10 @@ export class PeerTubeEmbed {
api: PeerTubeEmbedApi = null
autoplay: boolean
+
controls: boolean
+ controlBar: boolean
+
muted: boolean
loop: boolean
subtitle: string
@@ -295,7 +298,10 @@ export class PeerTubeEmbed {
const params = new URL(window.location.toString()).searchParams
this.autoplay = this.getParamToggle(params, 'autoplay', false)
+
this.controls = this.getParamToggle(params, 'controls', true)
+ this.controlBar = this.getParamToggle(params, 'controlBar', true)
+
this.muted = this.getParamToggle(params, 'muted', undefined)
this.loop = this.getParamToggle(params, 'loop', false)
this.title = this.getParamToggle(params, 'title', true)
@@ -539,7 +545,10 @@ export class PeerTubeEmbed {
common: {
// Autoplay in playlist mode
autoplay: alreadyHadPlayer ? true : this.autoplay,
+
controls: this.controls,
+ controlBar: this.controlBar,
+
muted: this.muted,
loop: this.loop,
diff --git a/shared/core-utils/common/url.ts b/shared/core-utils/common/url.ts
index 8020d9b28..fd54e7594 100644
--- a/shared/core-utils/common/url.ts
+++ b/shared/core-utils/common/url.ts
@@ -48,7 +48,10 @@ function decorateVideoLink (options: {
// Embed options
title?: boolean
warningTitle?: boolean
+
controls?: boolean
+ controlBar?: boolean
+
peertubeLink?: boolean
p2p?: boolean
}) {
@@ -73,7 +76,10 @@ function decorateVideoLink (options: {
if (options.muted === true) params.set('muted', '1')
if (options.title === false) params.set('title', '0')
if (options.warningTitle === false) params.set('warningTitle', '0')
+
if (options.controls === false) params.set('controls', '0')
+ if (options.controlBar === false) params.set('controlBar', '0')
+
if (options.peertubeLink === false) params.set('peertubeLink', '0')
if (options.p2p !== undefined) params.set('p2p', options.p2p ? '1' : '0')
diff --git a/support/doc/api/embeds.md b/support/doc/api/embeds.md
index d64615764..bc3b5304c 100644
--- a/support/doc/api/embeds.md
+++ b/support/doc/api/embeds.md
@@ -49,6 +49,59 @@ player.seek(32)
player.pause()
```
+# URL parameters
+
+You can customize PeerTube player by specifying URL query parameters.
+For example `https://my-instance.example.com/videos/embed/52a10666-3a18-4e73-93da-e8d3c12c305a??start=1s&stop=18s&loop=1&autoplay=1&muted=1&warningTitle=0&controlBar=0&peertubeLink=0&p2p=0`
+
+## start
+
+Start the video at a specific time.
+Value must be raw seconds or a duration (`3m4s`)
+
+## stop
+
+Stop the video at a specific time.
+Value must be raw seconds or a duration (`54s`)
+
+## controls
+
+Mimics video HTML element `controls` attribute, meaning that all controls (including big play button, control bar, etc.) will be removed.
+It can be useful if you want to have a full control of the PeerTube player.
+
+Value must be `0` or `1`.
+
+## controlBar
+
+Hide control bar when the video is played.
+
+Value must be `0` or `1`.
+
+## peertubeLink
+
+Hide PeerTube link in control bar.
+
+Value must be `0` or `1`.
+
+## muted
+
+Mute the video by default.
+
+Value must be `0` or `1`.
+
+## loop
+
+Automatically start again the video when it ends.
+
+Value must be `0` or `1`.
+
+## subtitle
+
+Auto select a subtitle by default.
+
+Value must be a valid subtitle ISO code (`fr`, `en`, etc.).
+
+
# Methods
## `play() : Promise`