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

  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.

  2. Lyly

    Pokerogue brings a fresh twist to the Pokémon franchise, combining the beloved aspects of capturing and battling Pokémon with the thrilling unpredictability of roguelike games.

HTTPS SSH

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