Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default withMermaid({
text: "Version",
items: [
{ text: "latest", link: "/" },
{ text: "1.0", link: "/" },
{ text: "1.1", link: "/" },
],
},
{
Expand Down Expand Up @@ -81,6 +81,7 @@ export default withMermaid({
items: [
{ text: "Overview", link: "/guide/" },
{ text: "Watching & the player", link: "/guide/watching" },
{ text: "Embedded player", link: "/guide/embedding" },
{ text: "Your library", link: "/guide/library" },
{ text: "Finding content", link: "/guide/finding-content" },
{ text: "Signing in", link: "/guide/accounts" },
Expand Down
76 changes: 76 additions & 0 deletions docs/guide/embedding.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# Embedded player

TypeType provides a dedicated player route for embedding YouTube videos without the
rest of the watch page.

## URL format

Use the YouTube video identifier after `/embed/`:

```text
https://your-instance.example/embed/VIDEO_ID
```

The identifier is the 11-character value after `v=` in a regular YouTube watch URL.
For example, `https://www.youtube.com/watch?v=dQw4w9WgXcQ` becomes
`/embed/dQw4w9WgXcQ`.

## Start position and autoplay

| Parameter | Value | Behavior |
| --- | --- | --- |
| `t` | Seconds or a duration | Start position |
| `start` | Seconds or a duration | Alias for `t` |
| `time_continue` | Seconds or a duration | Invidious-compatible alias for `t` |
| `autoplay` | `1` | Request autoplay |

Durations can combine hours, minutes, and seconds, such as `1h30m15s`. When several
start parameters are present, TypeType uses `t`, then `start`, then `time_continue`.
Invalid or negative values start from the beginning.

```text
/embed/dQw4w9WgXcQ?t=90
/embed/dQw4w9WgXcQ?start=1m30s
/embed/dQw4w9WgXcQ?time_continue=45&autoplay=1
```

Autoplay remains subject to the browser's media policy. A browser can require a user
gesture before starting audio.

## Add an iframe

```html
<iframe
src="https://your-instance.example/embed/dQw4w9WgXcQ?autoplay=1"
title="TypeType video player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
loading="lazy"
></iframe>
```

Give the iframe an explicit responsive size in the surrounding page. For example:

```css
.video-embed {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
}
```

Add `class="video-embed"` to the iframe when using this example.

## Accounts, settings, and guest access

Opening an embed URL directly in a browser tab can reuse the current TypeType account
and player settings. Inside an iframe, playback is anonymous and does not read the
embedding site's TypeType session or settings.

The instance must therefore allow guest access for iframe playback. An administrator
can enable **Allow guest mode** from the TypeType administration settings. When guest
access is disabled, the embed shows a dedicated message with a link to the normal
watch page instead of attempting playback.

The embed also shows the same unavailable, scheduled, and members-only states as the
watch page. Temporary loading failures provide a retry action when retrying is safe.
3 changes: 2 additions & 1 deletion docs/guide/library.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ You can clear it whenever you want, see [Privacy & blocking](./privacy#your-data
## Watch later

Send a video to **Watch later** to come back to it, a simple queue separate from your
playlists.
playlists. Open a video's actions menu and select **Save to Watch later** to add it
immediately; select **Remove from Watch later** from the same menu to remove it.

## Favorites

Expand Down
12 changes: 12 additions & 0 deletions docs/guide/watching.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,18 @@ On a touch screen:
When enabled, the next video starts automatically when the current one ends. Toggle it
in [Settings](./settings#playback).

## Livestreams

YouTube livestreams use TypeType's native SABR player. The player follows the live
edge automatically, keeps buffering ahead during short network interruptions, and
allows seeking within the DVR window when the stream provides one.

## Embedded player

TypeType provides a dedicated route for embedding YouTube videos. See
[Embedded player](./embedding) for the URL format, parameters, iframe markup, and guest
access requirements.

## Shorts

Shorts play in a dedicated vertical, swipeable player. You can turn the Shorts surface
Expand Down