Overview | Website | Extension | Contributing | Documentation | License
Lightweight, no-registration online solution for creating, sharing, and watching collections of YouTube Shorts. This project consists of a Web application hosted via GitHub Pages and an optional Chrome extension for easier collection management.
YouTube currently lacks native support for creating playlists of YT Shorts.
This repository solves that problem by providing a simple way to compile, share, and view Shorts collections.
The optional chrome extension simplifies collection creation with browser shortcuts.
- No Registration
- Shareable Links
- Mobile support
- Go to https://justkesha.github.io/yt-shorts-compilations
- Fill in any text that contains links to yt shorts
- Click generate
- Collection of 5 YT Shorts
- Collection of 5 YT Videos * Experimental wide screen mode
Here are some preview screenshots from the website, PC & mobile view:
Action | Description | PC | Mobile |
---|---|---|---|
Next | Go to the next video in queue | Arrow bottom / right, Scroll down, Click next video preview at the bottom |
Swipe down / right |
Back | Go back one video in queue | Arrow up / left, Scroll up |
Swipe up / left |
Seek | Go to any video in queue | Progress bar at the top | Progress bar at the top |
Note
To enable swiping anywhere on mobile devices, toggle the lock button on the bottom.
Othewise, swiping will only be avalibble under the video player or on the sides.
This chrome extension simplifies the process of creating collection links using browser shortcuts.
It allows to add videos you're currently watching to your collections using hotkeys.
You can have from 1 to 4 collections at a time and customize things like thier names, colors and icons.
- Easy link generation
- Hotkeys for saving videos
- Collection customization
Here are some preview screenshots from the extension popup and the settings page:
Note
Collection backgrounds, unlikes colors, icons & names, are not selectable and are instead generated each time you open the extension popup from 16 possible variations.
- Browser with chrome extensions support - Chrome, Edge, Opera
- Download extensions/chrome directory
- Go to
chrome://extensions
url - Enable "Developer mode"
- Click "Load unpacked"
- Select the extension directory
Note
If the extension doesn't work, make sure it has all the necessary permissions toggled on.
- Open any YT Shorts video
- Click the save hotkey
- Repeat several times
- Click on the extension icon at the top right
- Hover onto the filled collection and click play
Windows | Mac | Description |
---|---|---|
Alt+Shift+Z |
Command+Shift+1 |
Save current playing YT Shorts video to collection 1 |
Alt+Shift+X |
Command+Shift+2 |
Save current playing YT Shorts video to collection 2 |
Alt+Shift+C |
Command+Shift+3 |
Save current playing YT Shorts video to collection 3 |
Alt+Shift+V |
Command+Shift+4 |
Save current playing YT Shorts video to collection 4 |
Contributions welcome! Here's how to help:
- Fork the repository
- Create a feature branch
- Submit a pull request with:
- Description of changes
- Related issue references
You can also report bugs or create feature suggestions in the Issues tab,
Just make sure you describe the problem properly and dont create duplicates.
Check for "good first issue" label in the issues tab for ideas.
You can ask questions in existing issues or ask to assign you to the issue before starting,
But don't forget to read the related documentation first!
- Maintain consistent style
- Test your changes thoroughly
- Keep the changes focused on one topic
- Update documentation if needed
- Update version in manifest when working on extention
This section contains minmal project documentation, mainly for contributors.
Read it if you want to have a better understanding of how this application works.
If you feel like the current documentation is missing important information, see Issue #66.
All website files are located in the docs/ folder for Github pages compatibility.
You can find open issues using the "website" label.
- Jquery 3.6.0
- YouTube IFrame API
- Google Fonts
Param | Alias | Description | Example |
---|---|---|---|
request |
r , ids , i |
Unseparated YT video IDs, duplicates are ignored |
...?r=E1RCT6eUyVgilcL2nHJvEc... |
startat |
start , s |
Starting video index (0-based), updates automatically |
...?r=...&s=3 |
params |
p |
Additional flags (see below) | ...?r=...&p=w |
Flag | Description |
---|---|
w |
Experimental wide screen mode, #64 |
Note
It seems like not long after this repo was published,
YT has added support for wider Shorts formats and the next & previous video buttons on pc.
This feature was added to mimic YT's "Ambient mode",
Although is a lot simpler. It works as follows:
- Dominant video thumbnail color is calculated
* Left & right sides of the image are ignored due to the vertical format - Saturation & lightness are adjusted for more contrast
- Simple css animation is used to simulate a dynamic change
Example thumbnail:
Result: gray #959D9D
There's a problem with using IFrame where it grabs and retains focus during interactions (clicking, scrolling, etc.), which is especially problematic on mobile devices (prevents swiping actions) where most part of the screen is covered by the Iframe element and unfocusing can be problematic.
To adress this, a workaround has been implemented to disable Iframe controls on mobile - Screen Lock Mode (lock icon at the bottom). When enabled - it will lock away video controls (like volume, playback, etc.) but allow for swiping through queue. The state of this setting is saved between sessions in browser's local storage.
All files are located in the extensions/chrome/ folder.
You can find open issues using the "extension" label.
Required Permission | Reasoning |
---|---|
storage |
Local storage is used for saving collections data |
activeTab |
To detect currently playing YT video |
A more fresh version of this list can be found in manifest under "permissions".