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 (1)

  1. Ellen Hennry

    A modified version of the official YouTube app was released in and is known as Manager of YouTube Vanced. Installing such files on Android phones and understanding the APK format were difficult tasks, particularly for non-techies. Therefore, the same developers' Vanced Manager steps in to save the day.

HTTPS SSH

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