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

Mobile

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.

Languages

TypeScript 47.8%

Svelte 46.8%

JavaScript 2.4%

Java 0.9%

CSS 0.8%

Other 1.3%