Build VueTube: A Youtube Clone with VueJS, Webpack and Flexbox

Alex Brown
Apr 11, 2018 · 8 min read

In this tutorial we are going to be building our own competitor to YouTube called VueTube. Here’s a screenshot of the finished product!

Image for post
Image for post

Prerequisite

Vue is an awesome front-end JavaScript framework for building awesome user interfaces. Webpack is a module bundler for JavaScript which receives assets used in development and bundles them into single static assets. Having a hard time with positioning in CSS? Flexbox simplifies all that.

We shall be using these tools and techniques to build out a Youtube clone.

Getting started

With this tutorial we will be using webpack to build and run single file components. To get started make sure that you have vue-cli installed.

Image for post
Image for post

Once vue-cli is installed we create a new project using the webpack build template shipped with the Vue CLI. In the command line, run:

Image for post
Image for post

Answer all the prompted questions. We wont need vue-router for this project.

Create the Video Player component

Now that the project is created we can create our Video Player component. Open the project in the code editor of your choice (I recommend VS Code).

Head to the folder and add a new file called

Go ahead and edit the component to:

Image for post
Image for post

This is a barebones Vue single-file component. It includes a template for our view, a script section for our components logic and a style section that is and only applies to our component.

We can now tell to show our component instead of the out of the box component. To do that we will need to replace the file in with this one.

Image for post
Image for post

Now we are importing the correct component and displaying it when the app starts up. Go ahead and start the application and let’s check out our progress so far. Run:

Image for post
Image for post

Creating our data

Now that we have our app set up lets populate some video data. We are going to utilize the vue data object to store our video info. Inside the script tag lets create a variable named videos.

Image for post
Image for post

We now have an empty array called videos. Let’s add five videos to the array. I am going to add 5 videos from the Tech Reviewer MKBHD. Feel free to use whatever videos you want.

Image for post
Image for post

So we are storing 6 main attributes. Id, Title, URL, Creator, Likes and Views for each video. Now that we have our data we can start to display it on the screen. The first step is to set our videos variable to the data object.

Image for post
Image for post

Looping through our data

Awesome, now we can loop through the data and show a list of the videos that exist on the player. To do that we are going to use v-for.

Image for post
Image for post

What we are doing here is looping through the array of videos that we just created. So is looping through each object or “video” in the videos array.

Since we are looping through the array we can access the fields from each object. In our video list we want to display a thumbnail, creator, views and title. To access those fields within the template we can use the handlebar notation like

Because the thumbnail needs to be displayed as an image we need to bind the field to the image src. For tags we can't use the handlebar notation instead we use to bind the url.

Refresh your browser and check out what it looks like! You should see something similar to this:

Image for post
Image for post

Making the video list pretty

Awesome! Now that we have the video list lets format it. We want the video list to look like the right side of a Youtube video. To get that same look and feel we will be using Flexbox for the layout.

First we want the thumbnail image and the thumbnail info divs to be side by side. To do this we can add just one line to the thumbnail class

Image for post
Image for post

Great now we have them side by side let’s add the rest of the styling

Now check out the updates in your browser!

Image for post
Image for post

Setting an active video

Our thumbnail list is all set up and now we can display our videos. When the app initially loads we can just display the first video in the array. To do that lets set create a field in the data object called this is what we will use to display whatever video the user has picked. To set it to the first video when the page is loaded all we have to do is set to

Image for post
Image for post

The active video is now part of the data object meaning that we can access it simply by referencing inside the template. To show the youtube video we can create an iframe that is bound to the field of our video object.

Image for post
Image for post

Let’s add the rest of the video information below the iframe tag.

Image for post
Image for post

Awesome! We now have an active video that displays. Let’s make it look good.

Refresh your browser and check it out!

Image for post
Image for post

Make it work!

Let’s make it possible for us to choose the video that we want to watch. To do that we will write a method in the section.

Image for post
Image for post

So we have created a method called that takes a video parameter. This method will be used when a user chooses a thumbnail to watch from the video list. When a video is chosen we set the to the video that was clicked and we also increase the videos view count by 1.

Now we have to bind the method to a click event on each video in the v-for loop

Image for post
Image for post

Try clicking on a video within the video list! If everything went well then you should be able to watch the video that you clicked on.

Set up the Like Button

Our last step is to set up the like button. We will create another method that adds one to the total likes when the button is clicked.

and then we can bind the method to the like button in the template

Refresh your browser and try to like your videos! You should see the counter going up and it should persist even when you choose a different video.

Image for post
Image for post

Add some finishing touches

For our last step we can add our new video players logo. Save the image below as into the folder.

Image for post
Image for post

Now we can add the logo to our file

Image for post
Image for post

Thanks for reading!

Thanks for making it this far. Hope you enjoyed the tutorial. If you have any questions or comments feel free to ask them below.

If you want to see more tutorials like this make sure to follow me on Instagram and Twitter!

Techtrument

Awesome stuff and much more, by techies

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store