Youtube Video Player With Vue.js – AutoTube

Youtube Video Player With Vue.js – AutoTube

AutoTube is an All In One Youtube video player for your web app, built with Vue.js.

AutoTube - The Missing Youtube Player

AutoTube Logo

AutoTube is the all in one youtube player that you never knew you needed, developed by Bilal Abdullah.

Ever wondered why youtube hasn't implemented certain features like being able to make a playlist of your subscriptions newest videos in a click of a button? Me too, that's why I created AutoTube. Spend less time making playlists and more on your work!


AutoTube Screenshot 1

Why AutoTube?

If you're like me, you always have something playing in the background while programming.

This may sound familiar to you. A typical workday consist of pulling out the computer and finding a playlist or building your own to start running in the background while you work. You may start adding all of the new videos from your subscriptions or browse to find a topic that you want.

I can testify that this takes a lot of time. This is where AutoTube steps in. Simply pulling down filter and clicking My Subscriptions will retrieve all of your subscriptions and getting the latest videos from each and making a playlist that starts playing automatically. Leave it in the background and start your work day in a matter of seconds.

Youtube almost ad free

There's nothing worse than getting on youtube and starting your videos and running into ads on literally every single video. Listening to that same one ad and having to navigate back to the page to skip it is infuriating. Using AutoTube will get rid of almost all of the ads that you would normally face. There are some videos that will bypass this and still display an ad, but it's only a few.



Open up Filter and you will be given a list of options to choose from:

Search Type

This is a simple search that will make a playlist of what ever keyword you're searching for.

My Subscriptions:
The bread and butter of AutoTube. My Subscriptions will create a playlist of all of your subscriptions newest videos in a matter of seconds. Currently it get's the 3 latest videos from your subscriptions

Search for a channels username and you will be given a list to pick from. After picking the list it will make a playlist from the channel taking into account of any other filters you have.

Search for a playlists by keyword and you will be given a list to pick from. After picking the list it will start playing.

Sort By

Resources are sorted based on their relevance to the search query.

Resources are sorted in reverse chronological order based on the date they were created.

Resources are sorted alphabetically by title.

View Count:
Resources are sorted from highest to lowest number of views.

Channel Video Count:
Only works with Channels. Channels are sorted in descending order of their number of uploaded videos.

Max Results:

Determines how many videos you would like to retrieve. For My Subscriptions it will only allow a maximum of 5 videos per channel.

Child Filter:

Turning Child Filter on indicates will restrict the content that is returned.

Developers only: Getting Api Key and Client Id

Mush have an API_KEY and CLIENT_ID inside env to use the app

Build Setup

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn run dev

# build for production with minification
yarn run build

# build for production and view the bundle analyzer report
yarn run build --report

Would you like to donate?

The goal of AutoTube was to remove any distractions, to maximize production and get on with your day. In order to do this, any type of ads have been removed and any need to signup on the app etc. The first page that comes to you starts playing a video immediately. This comes at a cost though. Hosting on a server and using Youtube's Api cost money after so many users. If you tend to use this app as your primary source of video watching and would like to help further the development of this app, donations would definitely help. It would be greatly appreciated if you could donate to my

Payment Completed Res {id: "PAY-04P78695DH2528458LJOTE3A", intent: "sale", state: "approved", cart: "0VU83183J8442434W", create_time: "2018-01-15T23:00:14Z", …}cart: "0VU83183J8442434W"create_time: "2018-01-15T23:00:14Z"id: "PAY-04P78695DH2528458LJOTE3A"intent: "sale"payer: payer_info: {email: "[email protected]", first_name: "Test", middle_name: "Test", last_name: "Ah", payer_id: "VXJG5T5HK6YXU", …}payment_method: "paypal"status: "VERIFIED"proto: Objectstate: "approved"transactions: [{…}]0: {invoice_number: "011417", amount: {…}, item_list: {…}, related_resources: Array(1)}amount: {total: "2.99", currency: "USD", details: {…}}invoice_number: "011417"item_list: {}proto: Objectrelated_resources: [{…}]proto: Objectlength: 1__proto__: Array(0)proto: Object

Payment Authorized Res {paymentToken: "EC-0VU83183J8442434W", payerID: "VXJG5T5HK6YXU", paymentID: "PAY-04P78695DH2528458LJOTE3A", intent: "sale", returnUrl: "…&token=EC-0VU83183J8442434W&PayerID=VXJG5T5HK6YXU"}

Github Repository

Tags: #VueJs