Modern material design for Invidious.

 

---

Help translate Materialious!

Features

• Watch sync parties!
• Sponsorblock built-in.
• Return YouTube dislikes built-in.
• DeArrow built-in (With local processing fallback).
• Video progress tracking & resuming.
• No ads.
• No tracking.
• Light/Dark themes.
• Custom colour themes.
• Integrates with Invidious subscriptions, watch history & more.
• Live stream support.
• Dash support.
• Chapters.
• Audio only mode.
• Playlists.
• PWA support.
• YT path redirects (So your redirect plugins should still work!)

Setup

For security reasons regarding CORS, your hosted instance of Materialious must serve as the value for the Access-Control-Allow-Origin header on Invidious.

Invidious doesn't provide a simple way to modify CORS, so this must be done with your reverse proxy.

Step 1: Reverse proxy

Caddy example

invidious.example.com {
	@cors_preflight {
		method OPTIONS
	}
	respond @cors_preflight 204

	header Access-Control-Allow-Credentials true
        header Access-Control-Allow-Origin "https://materialious.example.com" {
		defer
	}
        header Access-Control-Allow-Methods "GET,POST,OPTIONS,HEAD,PATCH,PUT,DELETE"
        header Access-Control-Allow-Headers "User-Agent,Authorization,Content-Type"

	reverse_proxy localhost:3000
}

materialious.example.com {
	reverse_proxy localhost:3001
}

Nginx example

server {
    listen 80;
    server_name invidious.example.com;

    location / {
        if ($request_method = OPTIONS) {
            return 204;
        }

        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin "https://materialious.example.com" always;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, HEAD, PATCH, PUT, DELETE" always;
        add_header Access-Control-Allow-Headers "User-Agent, Authorization, Content-Type" always;

        proxy_pass http://localhost:3000;
    }
}

server {
    listen 80;
    server_name materialious.example.com;

    location / {
        proxy_pass http://localhost:3001;
    }
}

Traefik example

Add this middleware to your Invidious instance:

http:
  middlewares:
    materialious:
      headers:
        accessControlAllowCredentials: true
        accessControlAllowOriginList: "https://materialious.example.com"
        accessControlAllowMethods:
          - GET
          - POST
          - OPTIONS
          - HEAD
          - PATCH
          - PUT
          - DELETE
        accessControlAllowHeaders: 
          - User-Agent
          - Authorization 
          - Content-Type

Other

Please open a PR request or issue if you implement this in a different reverse proxy.

Step 2: Invidious config

The following Invidious values must be set in your config.

• domain: - The reverse proxied domain of your Invidious instance.
• https_only: true - Must be set if you are using HTTPS.
• external_port: 443 - Must be set if you are using HTTPS.

Step 3: Docker

Please ensure you have followed the previous steps before doing this!

version: "3"
services:
  materialious:
    image: wardpearce/materialious
    restart: unless-stopped
    ports:
      - 3001:80
    environment:
      # No trailing backslashes!
      # URL to your proxied Invidious instance
      VITE_DEFAULT_INVIDIOUS_INSTANCE: "https://invidious.materialio.us"

      # URL TO RYD
      VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE: "https://returnyoutubedislikeapi.com"

      # URL to your proxied instance of Materialious
      VITE_DEFAULT_FRONTEND_URL: "https://materialio.us"

      # URL to Sponsorblock
      VITE_DEFAULT_SPONSERBLOCK_INSTANCE: "https://sponsor.ajay.app"

      # URL to DeArrow
      VITE_DEFAULT_DEARROW_INSTANCE: "https://sponsor.ajay.app"

      # URL to DeArrow thumbnail instance
      VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE: "https://dearrow-thumb.ajay.app"

Previews

Player

Settings

Channel

Chapters

Playlists

Have any questions?

Join our Matrix space

Special thanks to

• Invidious
• Clipious for inspiration & a good source for learning more about undocumented Invidious routes.
• Vidstack player
• Beer CSS (Especially the YouTube template what was used as the base for Materialious.)
• Every dependency in package.json.