Zen Mode is a website which allows you to format individual websites or individual youtube videos into a high level view, and then share the link with your friends. Currently this is limited to youtube videos, but I am working on adding support for more video sites and entire websites.

This project basically ties together: an Astro static site, user selected flexbox properties, and user selected iframes paths.

Sometimes I find myself at my computer monitor trying to manage multiple sites or video streams in different tabs. I wanted to create a website which would allow me to format the iframe sites into a single window, and then share the link with my friends.

Here are a few use cases I can think of:

• Breaking news: You want to watch multiple videos and fullscreen the one that is most interesting to you.
• Monitoring: You want to monitor multiple live streams like Train Cam footage, or a live stream of a city?
• Collaborative Coding: An open window in an online IDE, docs site, and live preview.
• Sharing: You want to share a URL of multiple videos with your friends? Zen mode lets you do that!

• Not all sites are supported. If you find a site that is not supported, please open an issue and I will try to add support for it.
• Autoplay is currently disabled in Safari and iOS. I am working on a solution to this problem.

Star and watch the repo to get updates on new features!

• Go to the website: https://zen-mode.vercel.app/
• If it is your first time here, click add videos to get started
• Enter the URL of the website or video you want to display
• Set the number of Rows you want
• Set the number of Columns you want
• The URL will update with your row and column count, as well as your video paths for easy sharing. This URL will likely be pretty long, so use a service like tinyurl to shorten it.

This site uses Astro, a static site generator. To run locally, you will need to install the dependencies and run the dev server.

1. Clone or download the repo
2. Install dependencies: npm install
3. Run the dev server: npm run dev
4. Open the site in your browser: http://localhost:3000

All commands are run from the root of the project, from a terminal:

Feel free to check the Astro documentation or jump into their Discord server.

I deploy using Vercel. To deploy, you will need to create a Vercel account and link it to your GitHub account. Then, you can deploy the site by adding the repo as a new project and clicking the "Deploy" button below.

• Astro - Static site generator
• Tailwind CSS - CSS framework