A lightweight and responsive video showcase for Prativishwa: one-n-all, built with HTML, CSS, and vanilla JavaScript.
The project presents the Prativishwa concept through a focused landing page with project highlights and an accessible full-screen video viewer.
- Modern dark monochromatic interface
- Responsive layout
- Fixed responsive header
- Hide-on-scroll header behavior
- Desktop and mobile navigation
- Project introduction section
- Project feature cards
- Responsive YouTube video preview
- Full-screen video modal
- Automatic video playback when opened
- Video playback stops when the modal closes
- Escape key support
- Overlay click to close
- Modal focus management
- Background scroll locking
- Back-to-top control
- Semantic HTML
- Keyboard accessible controls
- Visible focus states
- SEO and social sharing metadata
- No jQuery
- No external JavaScript framework
- No unnecessary media libraries
- HTML5
- CSS3
- Vanilla JavaScript
- YouTube Embed
- GitHub Pages
video_app_html_css_javascript
├── public
│ ├── favicon.ico
│ ├── logo.png
│ └── preview.png
├── .gitignore
├── index.html
├── script.js
├── style.css
├── LICENSE
├── README.md
└── screenshot.png
Clone the repository:
git clone https://github.com/a2rp/video_app_html_css_javascript.gitOpen the project folder:
cd video_app_html_css_javascriptYou can then open index.html directly in a browser or serve the folder with a local development server.
The project uses an embedded YouTube presentation that opens inside a responsive modal viewer.
The video is loaded only when the viewer is opened and is reset when the viewer is closed so playback does not continue in the background.
The interface includes:
- Semantic buttons and navigation
- Keyboard accessible controls
- Escape key modal closing
- Focus management
- Focus trapping inside the video viewer
- Accessible dialog attributes
- Descriptive labels
- Visible keyboard focus states
- Reduced motion support
- Additional project videos
- Multiple showcase entries
- Video categories
- Search and filtering
- Local video support
- Additional project information sections
This project is licensed under the MIT License.
See the LICENSE file for details.