Client markup

PeerTube supports custom markdown/HTML markup in some markdown fields (to create your homepage etc).

Full markdown is supported and basic HTML tags are allowed (<a>, <strong>, <p> etc). The style attribute is also supported.

Custom PeerTube HTML tags

Additionally, PeerTube supports custom HTML tags that can be configured using data-* attributes.

peertube-container

Create a container with a specific layout that can inject a title and a description.

• data-width: container width attribute
• data-title: title injected in the container
• data-description: description injected in the container
• data-layout: row or column
• data-justify-content: normal or space-between (default to space-between to fill all available width)

<peertube-container data-layout="row" data-title="Local videos" data-description="Only local videos are displayed">
  <peertube-videos-list data-count="10" data-only-local="true" data-max-rows="2"></peertube-videos-list>
</peertube-container>

peertube-button

Inject a PeerTube button.

• required data-href: button link
• required data-label: button label
• data-theme: primary or secondary
• data-blank-target: open or not the link in the current tab

<peertube-button data-href="https://framatube.org" data-blank-target="true" data-theme="secondary" data-label="My super button"></peertube-button>

peertube-video-embed

Inject a PeerTube video embed.

• required data-uuid: video id, uuid or shortUUID
• PeerTube >= 7.2 data-responsive: responsive embed player
• PeerTube >= 7.2 data-start-at: starts the video at a specific time
• PeerTube >= 7.2 data-stop-at: stop the video at a specific time
• PeerTube >= 7.2 data-subtitle: auto select this subtitle
• PeerTube >= 7.2 data-autoplay: auto play the video (most of web browsers requires a muted video to accept autoplay)
• PeerTube >= 7.2 data-muted: mute the video
• PeerTube >= 7.2 data-loop: restart the video when it ends
• PeerTube >= 7.2 data-title: display video title information
• PeerTube >= 7.2 data-p2p: enable/disable P2P
• PeerTube >= 7.2 data-warning-title: display P2P warning if P2P is enabled
• PeerTube >= 7.2 data-control-bar: display control bar
• PeerTube >= 7.2 data-peertube-link: display instance link in control bar

<peertube-video-embed data-uuid="164f423c-ebed-4f84-9162-af5f311705da"></peertube-video-embed>

<peertube-video-embed
  data-uuid="164f423c-ebed-4f84-9162-af5f311705da"
  data-start-at="1" data-stop-at="10" data-responsive="false"
  data-subtitle="fr" data-autoplay="false" data-muted="false" data-loop="false"
  data-title="false" data-p2p="false" data-warning-title="false" data-control-bar="true" data-peertube-link="false"
></peertube-video-embed>

<peertube-video-embed
  data-uuid="164f423c-ebed-4f84-9162-af5f311705da"
  data-start-at="1" data-stop-at="10" data-responsive="true"
  data-subtitle="fr" data-autoplay="true" data-muted="true" data-loop="true"
  data-title="false" data-p2p="false" data-warning-title="false" data-control-bar="false" data-peertube-link="true"
></peertube-video-embed>

peertube-playlist-embed

Inject a PeerTube playlist embed.

• required data-uuid: playlist UUID
• PeerTube >= 7.2 data-responsive: responsive embed player
• PeerTube >= 7.2 data-playlist-position: playlist element position to play

<peertube-playlist-embed data-uuid="4b83a1cc-8e3b-4926-b1aa-8ed747557bc9"></peertube-playlist-embed>
<peertube-playlist-embed data-playlist-position="4"></peertube-playlist-embed>

peertube-video-miniature

Inject a PeerTube video miniature.

• required data-uuid: video UUID or video short UUID
• data-only-display-title: display or not miniature attributes (views, channel etc)

<peertube-video-miniature data-only-display-title="true" data-uuid="164f423c-ebed-4f84-9162-af5f311705da"></peertube-video-miniature>
<peertube-video-miniature data-only-display-title="true" data-uuid="ajQF5i82Zuao4ZoAeaSJwn"></peertube-video-miniature>

peertube-playlist-miniature

Inject a PeerTube playlist miniature.

• required data-uuid: playlist UUID

<peertube-playlist-miniature data-uuid="4b83a1cc-8e3b-4926-b1aa-8ed747557bc9"></peertube-playlist-miniature>

peertube-channel-miniature

Inject a channel miniature.

• required data-name: channel name
• data-display-latest-video: display or not the latest published video
• data-display-description: display or not the channel description

<peertube-channel-miniature data-name="my_channel_username"></peertube-channel-miniature>
<peertube-channel-miniature data-name="my_channel_username" data-display-latest-video="false" data-display-description="false"></peertube-channel-miniature>

peertube-videos-list

Inject a list of videos.

• data-sort: sort the videos (-publishedAt, -views, views etc. See sort option from REST API for a complete description: https://docs.joinpeertube.org/api-rest-reference.html#operation/getVideos)
• data-count: limit number of displayed videos
• data-max-rows: limit number of video rows
• data-only-local: only display local videos?
• data-is-live: only display VOD or live videos
• data-category-one-of: comma-separated PeerTube categories (use keys of https://docs.joinpeertube.org/api-rest-reference.html#operation/getCategories)
• data-language-one-of: comma-separated PeerTube languages (use keys of https://docs.joinpeertube.org/api-rest-reference.html#operation/getLanguages)
• data-channel-handle: only display videos of this channel (chocobozzz_channel for a local channel, or chocobozzz_channel@peertube2.cpy.re for a remote channel)
• data-account-handle: only display videos of this account (chocobozzz for a local account, or chocobozzz@peertube2.cpy.re for a remote account)
• data-only-display-title: display or not miniature attributes (views, channel etc)
• PeerTube >= 7.1 data-host: only display videos of this channel (framatube.org, peertube.cpy.re, etc.)

<peertube-videos-list
  data-only-display-title="false" data-title="Listed by languages" data-language-one-of="fr,en" data-count="3"
  data-only-local="false" data-max-rows="2" data-sort="-publishedAt" data-is-live="false"
></peertube-videos-list>

<peertube-videos-list data-channel-handle="chocobozzz@peertube2.cpy.re"></peertube-videos-list>

<peertube-videos-list data-account-handle="chocobozzz"></peertube-videos-list>

peertube-instance-avatar PeerTube >= 6.1

Inject the platform avatar set by the administrator.

• data-size: the size in (pixels) of the avatar element

<peertube-instance-avatar></peertube-instance-avatar>
<peertube-instance-avatar data-size="48"></peertube-instance-banner>

peertube-instance-banner PeerTube >= 6.1

Inject the platform banner set by the administrator.

<peertube-instance-banner></peertube-instance-banner>
<peertube-instance-banner style="display: block; max-width: 500px; margin: auto;"></peertube-instance-banner>