Modern YouTube Shorts Viewer & Video Player Clone

Description:

This modern YouTube Shorts viewer and video platform clone provides a complete video streaming interface with advanced UI components and smooth interactions. Built with vanilla JavaScript, it demonstrates complex video platform UI patterns, dynamic content rendering, and responsive design principles for modern web applications.

Unlike basic video players, this implementation features multiple video layouts (Shorts, trending, recommended), dropdown action menus, and smooth scrolling navigation to create a professional video browsing experience that mimics industry-leading platforms.

The application showcases dynamic content rendering from JSON data, advanced UI component patterns, and comprehensive event handling - essential capabilities for building sophisticated media applications with complex user interactions.

The Challenge:

Most video platform clones are either too simplistic or overly complex. I wanted to create a balanced, feature-rich video interface that demonstrates modern UI patterns while maintaining clean code architecture and excellent performance.

Development Story:

This project combined my interest in video platforms with the technical challenge of building complex UI systems. The most interesting aspect was implementing the multiple layout system that handles different video formats (Shorts, regular videos) with consistent interaction patterns.

Key Challenge: Creating a smooth, responsive interface that handles various video layouts, dropdown menus, and scrolling navigation while maintaining consistent user experience across all components.

Technologies Used:

• HTML5 - Semantic video card structures and accessible navigation
• CSS3 - Advanced grid layouts, smooth animations, and responsive video cards
• JavaScript ES6+ - Dynamic content rendering, event delegation, and UI state management
• JSON Data Structure - Modular video data organization with metadata
• Scroll APIs - Smooth scrolling navigation and position detection

Technical Architecture:

• Component-Based UI - Reusable video card components for different layouts
• Event-Driven Interactions - Comprehensive event handling for user interactions
• Responsive Layout System - Adaptive video grids for different screen sizes
• Dynamic Content Management - JSON-driven video data with real-time rendering

Technical Implementation:

• Video Rendering: Dynamic card generation with proper metadata display
• Navigation System: Smooth scrolling with position detection and controls
• Dropdown Management: Contextual action menus with proper state handling
• Layout Management: Multiple video formats (Shorts, trending, recommended)

Core Functionality:

• Multiple video layouts (Shorts, trending, recommended videos)
• Smooth scrolling navigation with visual feedback
• Dropdown action menus for video interactions
• Dynamic video metadata display (views, timestamps, channels)

User Experience:

• Smooth scrolling with navigation controls
• Consistent dropdown menus across all video types
• Responsive video card layouts for optimal viewing
• Clear visual hierarchy for video information

Technical Features:

• Dynamic content rendering from JSON data source
• Scroll position detection with navigation controls
• Reusable video card components for different layouts
• Comprehensive event delegation for dynamic elements

How to Use:

• Browse videos in different sections (trending, Shorts, recommended)
• Use navigation buttons to scroll through video categories
• Click on any video to watch it in the dedicated player
• Use dropdown menus on videos for additional actions (share, queue)

Code Highlight:

// Dynamic video card rendering with metadata
function videoContainer(video, selector) {
    const videoHTML = `
        <li class="video_card">
            <a href="view.html?watch=${video.video_id}" class="video_card_header">
                <img src="${video.thumbnail}" alt="${video.title}">
                <div class="video_card_header_duration">${video.duration}</div>
            </a>
            <div class="video_card_body">
                <div class="video_card_body_details">
                    <a href="view.html?watch=${video.video_id}" class="video_card_body_details_title">
                        ${video.title}
                    </a>
                    <div class="video_card_body_details_meta">
                        ${video.channel}  ${formatNumber(video.views)} views  ${enhancedTimeAgo(video.upload_date)}
                    </div>
                </div>
            </div>
        </li>
    `;
    selector.insertAdjacentHTML("beforeend", videoHTML);
}

Key Learnings:

• Mastered complex UI component patterns for media applications
• Improved understanding of responsive video layouts and grid systems
• Learned to create smooth scrolling navigation with visual feedback
• Gained experience with dynamic content rendering and event delegation

Future Enhancements:

• Actual video playback with HTML5 video player
• User authentication and personalized recommendations
• Video search and filtering functionality
• Comment system and social interactions

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• Shorts Viewing
• Responsive Design
• Modern UI
• Lightweight and Fast