Make a YouTube Clone from Scratch: JavaScript PHP and MySQL

Style the page container to full width with a #fafafa background. Fix the masthead at the top with 56px height, 100% width, bottom border, and centered content with flexbox.

Style the side navigation bar by setting width 240px, background #f5f5f5, padding-top 56px, and fixing it with top 0 bottom 0; use display flex with column direction.

Style the main section and main content container by applying top and horizontal padding, and preview changes via the sources tab and text editor.

Create a JavaScript file to toggle the side navigation and adjust the main content padding, using jQuery and Bootstrap CDNs, and wire a button to control the navigation.

Show and hide the left navigation bar with a click handler, toggle a left padding class, and reveal the panel with 240px left padding.

Replace the menu button with a custom image icon from icons8 and style it with color and size in css, using assets/images/icons to access 65,000 free icons.

Create a navigation search bar using a form with method get to send the term to search_top.php. The input named term feeds the query, with a styled search button.

Style the search bar in the mast head with flex, left and right margins of 40 pixels, and a 600-pixel max width; apply border, inner box shadow, and rounded corners.

Add right-aligned upload and profile icons linking to upload.php and to the profile or sign-up page, with default profile pictures from the assets folder and hover styles for anchors.

Move the navigation bar into its own include file and load it on every page to avoid duplicating code by using an includes folder with header and footer files.

Create the upload page and build a reusable column container using flex, white background, height, padding, and a box shadow to shape the page layout for the YouTube clone.

Create a reusable PHP upload form with a video details form provider class in includes, outputting the form and posting to a processing page using a Bootstrap file input.

Create a title input and a description textarea with proper name attributes and bootstrap form controls. Add two dropdowns and a submit button, and apply resizing rules to the textarea.

Learn to create a privacy input with a drop-down for private and public options, wire it to a form, and fetch categories from the database for dynamic dropdowns.

Create a categories MySQL table with an auto-incrementing id primary key and a name field using phpMyAdmin, so new categories update all site dropdowns in the YouTube clone.

connect to the database in php by creating an includes config file, setting timezone to Europe/London, and establishing a pdo connection with try-catch error handling.

Retrieve all categories from the categories table using PHP and MySQL, prepare and execute a select query, loop through results, and populate a dropdown on the upload form.

Learn to transform category data retrieval into a dropdown, create a categories function, and use a constructor to pass the MySQL database connection into a class.

Create a dynamic categories dropdown by querying the database and looping through results to build option elements, using each category's id as the option value so changes reflect automatically.

This lecture shows how to add an upload button to the video details form, create a function to render it, and style with Bootstrap btn primary for submission.

Create a PHP processing page to handle the user upload, verify post submission, and process the file with a navigation bar included.

Create a PHP video upload data class to store file data, title, description, privacy, category, and uploader. Use a constructor to initialize fields and prepare for a processing class.

Design a php video upload workflow by creating a video upload data class and a video processor, wiring a database connection, and implementing an upload function.

Designate a target directory and store uploaded videos in uploads/videos, saving only a reference in the database. Create a unique temporary path, sanitize the name, and convert to mp4.

Move the uploaded video from the temporary location to the videos directory, using a has_error check to confirm success, then convert to mp4 and remove the original.

Create the final file path for the uploaded video, move it to the videos folder, and convert it to mp4 before inserting the video details into the videos table.

Create the videos table with an auto-increment id and ten columns. Then insert video data using prepared statements for title, uploaded by, description, privacy, category, and file path.

Install ffmpeg to convert videos to a supported format, generate thumbnails, and capture durations for videos. Download zip, unzip it, and place the ffmpeg packed folder in your site root.

Watch an FFmpeg demo converting a video to a widely supported mp4. Learn how to locate binaries, run a command line conversion, and apply it to user uploads.

Learn to convert videos to mp4 on the server side using PHP and FFmpeg, handling temp and final file paths, command execution, and cross-platform path adjustments.

Troubleshoot and fix video conversion in a YouTube clone by diagnosing macOS vs Linux VM issues, installing the Linux ffmpeg tools, extracting tar archives, updating file paths, and verifying uploads.

Delete the temporary video file after uploading by converting to mp4 and removing related database records that reference it, using a PHP delete function with unlink on the file path.

Generate three thumbnail images from a video, store their paths in a thumbnails table linked to the video, and mark the selected thumbnail for use.

Learn to retrieve a video's duration with ffprobe, then split the video into evenly spaced intervals to generate three thumbnails at YouTube thumbnail size, with path setup and testing.

Format video durations into a readable hours:minutes:seconds string by updating the videos table with a two-parameter function (duration in seconds, video id).

Convert the duration from seconds to a formatted hours:minutes:seconds string using conditional logic and zero padding, then update the videos table via a prepared statement binding duration and id.

Loop to generate thumbnails, sampling at intervals derived from duration times 0.8, and store unique image paths with the video id in the thumbnail table, marking the first as default.

Show a bootstrap modal loading spinner during video uploads, centering the animation with a static backdrop and disabled keyboard, and display an upload successful message when done.

Build the sign up page structure and a separate two-field login form, including the HTML scaffold for a sign in PHP page and bootstrap-styled forms.

Add a logo and header to the sign-up page for a finished look. Style the container as flexbox (100vh) with a background color and centered content, adjusting the logo size.

Style the form header by applying 20px padding top and bottom, 0 left/right, set h3 to 24px font size with 32px line height, and reset margins and top padding.

Add a signup form with inputs for first name, last name, username, email, and password; set the form to post to signup page, include placeholders, disable autocomplete, and require fields.

Style the signup form inputs by stacking them in a column with flex, set font size, margins, and borders, and customize the submit button color and size.

Style the sign in message by setting font size to 14 pixels, font weight to 400, and color to #212529 in the stylesheet for the sign in message class.

Add a sign in form with username and password inputs, placeholders, required fields, and autocomplete off, then adjust links and the form action to the sign in page.

Discover how to detect sign up form submission via post, access fields like first name, echo submitted data, and begin sanitizing input before storage.

Learn to sanitize form data in PHP by stripping tags, trimming spaces, removing mid-string spaces, and normalizing case by lowercasing text then capitalizing the first letter, ready for database insertion.

Move the sanitize function into a form sanitiser class, save it as a PHP file, and call its static method to sanitize form input without creating an instance.

Validate user input with a php account class that sanitizes data and inserts validated users into the users table, using a constructor and a register function for form fields.

Implement a private validate first name function in the account class, enforce a 2–25 character limit, push errors to an array, and use a constants class for messages.

demonstrates validating the first name length between 2 and 25 characters, pushing errors into a centralized message class, and rendering the error with a public get_error function near the input.

Validate the last name by mirroring the first name validation: copy the function, rename it to last name, enforce 2–25 characters, and update the error messages and constants accordingly.

Validate the username with a 5 to 25 character rule and a dedicated error message. Check for duplicates using a prepared SQL query and return early on errors.

Create the users table with an auto-increment id, first and last names, email, password, sign_up_date as current timestamp, and a profile_pic path, enabling username checks at signup.

Validate user emails in a PHP signup form by checking email consistency, using PHP filter to ensure valid format, and querying the database to prevent duplicate emails.

Learn to validate passwords in a YouTube clone project by checking match, enforcing alphanumeric with regex, and applying a 5–30 character length with clear errors.

Check error array is empty to confirm validity, then insert user details and return true or false, redirect to index page on success and preserve entered input on error.

Preserve user input across resubmissions by echoing last entered values into form inputs using post data, covering first name, last name, username, and email, while passwords are not retained.

Hash passwords by applying a hashing algorithm to the user input, generating a 128-character hash. Store the hash in the password column, then rehash on login and compare.

Insert user data into the users table with a prepared statement, binding first name, last name, username, email, password, and a default profile picture path, using autoincrement and current timestamp.

Remember the entered username on failed login by storing it in a session and repopulating the sign-in form with a reused value-getting function, while enforcing form post submission.

Learn how to detect a login form submission, sanitize post data, and process credentials with a login function in PHP, including session handling and redirects to the index page.

Create a user class to centralize user data such as first name and last name, with a constructor that accepts a database connection and the session username for header-wide access.

Expand the user class with getter functions to fetch username, name, email, profile pic, and signup date from a database using prepared statements.

Use the user class to fetch the current username with get username and insert it into the upload flow. Upload a video to confirm the record shows the uploaded-by username.

Create a video class modeled after the user class, with methods to fetch video data, title, and views, supporting initialization from an id or complete data.

Develop targeted video class helper functions to fetch specific database fields—id, uploaded by, title, description, privacy, file path, category, upload date, views, and direction—for a YouTube clone.

Implement a video class instance to increment the video views on page load, updating the videos table with a prepared statement bound to the video id.

Split the watch page into left video and right suggestions, implement a video player class, and output the video tag in the head with autoplay.

Set the video player to 100 percent width and fix the left column at 425 pixels with a flex layout to keep the video responsive.

Learn to build a reusable video info section class for a YouTube clone, with a constructor taking video and user data and private helpers to render title and view counts.

Style the video info section with CSS, setting full width, top padding, and a flex bottom layout; manage long titles and view count with overflow hidden and ellipsis.

Create a generic button provider class with a static create button function that takes text, image, action, and class to render reusable like and dislike buttons.

Create a generic like button component by passing text, image, action, and video id values, display the like count with get likes, and swap icons when the video is liked.

Create the likes and dislikes tables in phpmyadmin with an auto increment primary key, and columns for username, comment_id, and video_id, then implement queries to count likes per video.

Create a video player actions script, define a function that handles button presses and the video id, and include the script on the page to test with an alert.

Submit a like without refreshing the page using an AJAX call to a PHP endpoint, then handle the success callback and use the returned data.

Pass the video id in an ajax request using post, retrieve it with a matching post variable, and test by echoing and debugging with the console.

Implement the like function by sending the video id and logged-in user through an ajax call, inserting a like into the database via the video class, and echoing the result.

Implement a video like feature by checking if the user already liked the video in the likes table. Use prepared statements with user name and video id to insert like.

Implement an undo like feature by deleting from likes when a user taps like again, ensuring only one of like or dislike applies.

Toggle the active state of the like and dislike buttons and update the vote count and icon using the AJAX callback and the pressed button context with jQuery.

Explore returning a json object with likes and dislikes from the like function, encoding it as json, and updating the displayed counts based on user interactions.

Create a two-line JavaScript function to update likes. Read the value from span with class text, convert to a number, and increment; apply the same to dislikes with zero default.

Toggle the like button image and active state with JavaScript and PHP, updating the image source and class when users like or unlike, and load the appropriate state on load.

Implement the dislike functionality by duplicating the like logic, wiring Ajax requests, updating was disliked by, and toggling thumbs up/down images and counts to reflect user reactions.

Style the like buttons by removing padding, setting a transparent background, and removing borders, then align controls to the right and update the video info CSS.

Add a not-signed-in alert for the like button by checking user login status and prompting sign-in, using a static isLoggedIn function and a shared not-signed-in action in JavaScript.

Develop and integrate a user profile button in the video info view, showing the profile picture, name, views, upload date, and description with a link to the profile page.

Format the upload date by converting a string to a time object. Display a short month, day, and year for the published on date and link the uploader's profile.

Implement an edit video button that appears for the video owner and becomes a subscriber button otherwise, generating a hyperlink to edit_video.php with the video ID.

Create and manage a subscribers table for a YouTube clone using PHP and MySQL, including id, user, and subscriber fields, plus functions to check subscriptions and count subscribers.

Learn to implement a dynamic subscribe button for a YouTube clone using JavaScript, PHP, and MySQL. Access the subscribers table to check status, show subscriber counts, and render the button.

Learn to style the description container and subscribe button in a YouTube clone, including margins, max width, font size, padding, borders, and hover effects.

Implement a reusable subscribe function for the YouTube clone, posting to includes/ajax/subscribe.php with target user, subscriber, and burn, and guard against self-subscription with an alert and console log.

Learn how to pass user data into a subscribe function, validate with post variables, and insert subscriptions into a MySQL database using Ajax and PHP.

Learn to implement subscribe and unsubscribe functionality using a subscribers table, checking if a user is subscribed, inserting or deleting rows accordingly, and returning the updated subscription count.

Toggle the subscribe button between subscribe and unsubscribe using jQuery, update the subscriber count, and reflect the new state instantly without a page refresh in the YouTube clone course.

Develop and integrate a comments table in mysql for youtube clone, enabling users to post and reply to comments with id, posted by, video id, reply_to, body, and date posted.

Implement get number of comments function in the video class to query the comments table by video_id with a prepared statement and return the count.

Create the comments section for a YouTube clone by building a container with a comment count, a comment form with avatar and textarea, and a 'add a public comment' placeholder.

Style the comment section on a YouTube clone by applying flex layouts, margins, and borders to the header, profile picture, textarea, and post button.

Implement post comment function for the video page, capturing the comment text and submitting via ajax to store it in the database, using posted by username and video id.

Implement a post comment ajax request to submit comments for a video, send comment text, posted by, and video ID, and handle the response to confirm success.

insert a comment into the database with a prepared PHP query, binding posted by, video ID, response to, and body, then display the new comment.

Create a PHP comment class that handles input as array or id, fetches data, links to the logged-in user and video, and creates the last inserted comment.

Learn to display a newly posted comment on a YouTube clone using PHP and MySQL, building the comment block with author, profile link, and content, and debug insertion issues.

Develop a reusable comment controls class to render like, dislike, and reply buttons, plus a live reply section, mirroring video info controls for a YouTube clone.

Implement comment like and dislike functionality by building PHP methods to fetch likes and dislikes for a comment, calculate the net votes, and drive the like/dislike buttons.

Create a functional comment reply section by adding a reply button that reveals a new comment form, reusing the common actions class and hiding the form by default.

Style the comment section by applying cohesive styling to the profile picture, container, and form, and add hover effects with transparent backgrounds and black text.

Finish styling the comment section by applying the body font size 14px with a 20px line height, and refine the item container, controls, and like button spacing.

Implement a dynamic timestamp for comments by converting the post date to a relative time string like 'just now' or '5 minutes ago' using PHP and the date_posted field.

Implement a view replies section that displays and counts replies to comments, toggles visibility, and wires a get replies function using comment IDs and video IDs.

Implement a toggle reply function in JavaScript that shows or hides the comment form by locating the closest item container, computing the parent, and toggling a hidden class with CSS.

Create a like comment ajax request by adapting the like video flow, passing comment ID and video ID, and adding a new ajax PHP file.

Copy and adapt the like and dislike functions for comments from the video top HP class, replacing video id with comment id and handling ajax updates.

Update the ajax like system by reading the current count from the span with class like count and pass it to the update likes function, defaulting to 0 when empty.

Implement dislike functionality for comments by mirroring the like logic: swap like and dislike states, update counts, and verify database entries while testing the UI.

Implement and display all comments for a video by creating a get_comments function, querying the database, looping through results, and building the output string for each comment.

Add a get_replies PHP method and AJAX calls to fetch comment replies, then update the UI to display a replies section and replace the reply button.

Indent and style nested comment replies in the YouTube clone by left padding view replies section, and ensure replies attach under the parent with a pointer cursor and 14px font.

Develop a reusable PHP video grid class that renders suggested videos across home, search, and video pages, with a constructor, login object, and optional show filter.

Create a video grid item class that builds 15 random videos from the videos table and renders each as a grid item, with an optional header, title, and filter controls.

Create and test the video grid item, including a thumbnail and details, by returning an anchor tag that links to the video.

Master how to output the video thumbnail by querying the thumbnails table for the selected image, retrieving its file path, and rendering the thumbnail with a duration time stamp overlay.

Learn to style video thumbnails with a responsive flex grid, adding video grid items, wrapping behavior, and a bottom corner, semi-transparent timestamp that sits over each image.

Implement a private createDescription function to trim the description for large mode; when over 350 characters, take the first 347 and append an ellipsis for the search page.

Style the video details card on the suggestions page with targeted CSS for the thumbnail, container, title, and username, including padding, flex layout, and overflow handling for long usernames.