Snippets

Duane Blake Youtube Gallery using VueJS

Created by Duane Blake last modified
youtube-gallery.html
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<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>
<body>
	<div id="container">
		<h1>Videos</h1>
		<gallery></gallery>

		<template id="videos-template">
			<ul>
				<li v-for="video in videos">
					<p> <a href="http://www.youtube.com/watch?v={{video.snippet.resourceId.videoId}}">{{ video.snippet.title }} </a></p>
					<a href="http://www.youtube.com/watch?v={{video.snippet.resourceId.videoId}}"><img src="{{video.snippet.thumbnails.medium.url}}" alt="{{video.snippet.title}}" title="{{video.snippet.title}}" class="thumbnail" /></a>
				</li>
			</ul>	
		</template>
	</div><!-- #container -->	
	<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>
		Vue.component('gallery', {
				template: '#videos-template',
				data: function(){
					return {
						videos: []
					};
				},
				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);
						});
					}
				}
		});

		new Vue({
			el: 'body'
		});
	</script>
</body>
</html>

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.