Published on March 20, 2016 | Posted in Front End
Youtube Gallery using VueJS
At work recently I created a youtube gallery widget using a mixture of jQuery and HandlebarJS. I decide to rebuild my Gallery widget but using VueJs framework something I’ve not used before.
Applying for a Youtube Api Key
Before we start it’s important that you have a Google Account to access Google Developer Console. It’s free and straight forward to setup.
Sign into Developer Console. Click on create a project at the time of writing this tutorial it’s in a dropdown on the top right section of the page. Give your project a name and click on create
Now from within your project click on Enable and manage Apis. Now choose and enable YouTube Data API v3. Now that it is enabled Go to Credentials.
On the option “Which API are you using?” choose YouTube Data API v3 and on the option “Where will you be calling the API from?” and choose Web browser (Javascript).
Once that this has been selected. We now create our credentials click on Credentials in the left nav. Now click on Create credentials and select Api Key. Once this is selected now click on “Browser Key” from the modal lightbox.
On the next screen name your key and press create. Your Api key should be returned you in a modal box. Take a note of this number.
HTML Markup
For ease of use i’m going to put all markup on single html file. In production I would usally seperate the HTML, Javascript and the CSS.
First thing create a basic Html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Video</title>
</head>
<body>
<div id="container">
</div><!-- #container -->
</body>
</html>We going to create what our markup will look like pre VueJs.
<div id="container">
<h1>Videos</h1>
<ul>
<li>
<p>Title</p>
<img src="url" alt="alt" title="title" class="thumbnail" />
</li>
</ul>
</div><!-- #container -->We be using cdn to pull in vuejs. I will be embeding the javascript on the page to keep this example short.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
<script>
</script>
To make the code reusable I will be creating component gallery and which will video-template which we create shortly.
<script>
Vue.component('gallery', {
template: '#videos-template'
});
</script>
Now we need to create an empty array called video. We also tell the dom to run our method fetchVideoList
template: '#videos-template',
data: function(){
return {
videos: []
};
},
created: function() {
this.fetchVideoList();
}We now create the fetchVideoList method. What this method does is fetch the youtube playlist informaiton as a json feed. We are going to need a couple of things the playlistID, the Api key which we got earlier and finally how many videos you wish to fetch.
created: function() {
this.fetchVideoList();
},
methods: {
fetchVideoList: function(){
this.$http.get('https://www.googleapis.com/youtube/v3/playlistItems?playlistId=PLAYLISTID&key=APITKEY&fields=items&part=snippet&maxResults=15', function(videosList){
this.videos = videosList.items;
console.log(videosList.items);
});
}
}The final piece of Vuejs snippet we need is to fire a new Vue instance in this example I placing the vue on the body
new Vue({
el: 'body'
});Back to the HTML, we no longer need our previous ul so replace it with the code below. What the code below does is first we add a gallery directive. This is where the YouTube will be place on the page. Doing it as directive I find is the best approach as it allows the code to be reusable.
The gallery directive refers to the videos-template which is a list which loops through each video and prints title, Video url and Image Thumbnail
<template id="videos-template">
<ul>
<li v-for="video in videos">
<p> {{ video.snippet.title }} </p>
<img src="{{video.snippet.thumbnails.medium.url}}"
alt="{{video.snippet.title}}"
title="{{video.snippet.title}}"
class="thumbnail" />
</li>
</ul>
</template>I’m going to add some default styling to the page. If you where to use this code I reccomend you using classes rather than targeting direct page elements.
<title>YouTube Video</title>
<style type="text/css">
*{box-sizing:border-box;}
body{ background:#f4f4f4;}
#container{max-width:960px; margin: 0 auto; font-family:arial;}
ul{display:flex; flex-flow:row wrap; padding:0; align-content:space-between;}
li{width:31%; margin-right:2%; list-style:none; margin-bottom:30px; background:white; border-radius:3px; padding:10px;}
p{font-size:15px; min-height:40px;}
a{color:#2793da; text-decoration:none;}
a:hover{color:#333; text-decoration:underline;}
.thumbnail{border: 1px solid #fcfcfc; padding:2px; width:100%; height:auto;}
</style>
</head>Here is a link to the source code in full and a link to preview the gallery in action.