rzmk/yt-subs-project
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
▶ React web application showcasing custom subtitles overlaying multiple YouTube videos.
8 commits 1 branch 0 tags 9 MiB
Find a file
Exact
Mueez Khan 525a57b1f9
docs: remove unnecessary content from README.md
2024-01-09 00:42:34 -05:00
public 🚀 Initial commit! 2022-11-22 11:25:38 -05:00
src 🚀 Initial commit! 2022-11-22 11:25:38 -05:00
.gitignore Initialize project using Create React App 2022-11-20 05:55:57 -05:00
demo.gif 🚀 Initial commit! 2022-11-22 11:25:38 -05:00
package-lock.json ⬆️ Bump webpack from 5.75.0 to 5.76.1 2023-03-15 08:23:03 +00:00
package.json 🚀 Initial commit! 2022-11-22 11:25:38 -05:00
README.md docs: remove unnecessary content from README.md 2024-01-09 00:42:34 -05:00

README.md

Custom YouTube Subtitles

A website showcasing the ability to overlay custom subtitles for multiple YouTube videos using .vtt files.

Demo

How to Use

  1. Create captions for a YouTube video and save them as a .vtt file.
    1. One method is using online caption-making software or Adobe Premiere Pro, exporting as a .srt file and then converting it to a .vtt file using an online conversion tool.
  2. Rename the .vtt file to the video ID of the YouTube video.
    1. For example if the YouTube video you're captioning is at https://www.youtube.com/watch?v=-JTq1BFBwmo then the video ID is after the = symbol as -JTq1BFBwmo.
  3. Add the .vtt file to /src/captions/ and add the video ID to the array in captions.js.
  4. Build the React application and deploy it.

Conclusions

This was helpful in understanding how to work with the Video.js player and adding my own custom subtitles.

There is a possible issue where adding more caption entries may result in a single row of selectable videos to become too crowded/long, so this could be fixed. Though I don't plan to as this isn't a production application.