gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

MartinEesmaa

Note: This is all almost full YouTube ID informations. Original owner goes to AgentOak, modified version by Martin Eesmaa.

See the credits and also special thanks in below.

Last updated: July 2024

Also known as itag or format codes and way back they could be specified with the fmt parameter (e.g. &fmt=22). Depending on the age and/or popularity of the video, not all formats will be available.

DASH video

hizkifw

/**
 * cloudflare-worker-youtube-dl.js
 * Get direct links to YouTube videos using Cloudflare Workers.
 *
 * Usage:
 *   GET /?v=dQw4w9WgXcQ
 *   -> Returns a JSON list of supported formats
 *
 *   GET /?v=dQw4w9WgXcQ&f=251
 *   -> Returns a stream of the specified format ID

BackFront

<video controls="" width="400">
  <source src="http://66.128.61.175/reel/1cc976948e74aa62f7a7fde16e64fb6b/360p" type="video/mp4">
  Your browser does not support HTML5 video.
</video>