npm-polymer-elements
Version:
Polymer Elements package for npm
60 lines (53 loc) • 2.05 kB
HTML
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-ajax</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-ajax.html">
<link rel="import" href="../../iron-image/iron-image.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style>
iron-image {
background-color: lightgray;
margin: 1em;
}
.horizontal-section {
max-width: 300px;
margin-bottom: 24px;
}
</style>
</head>
<body unresolved>
<h1>Video Feed</h1>
<div class="horizontal-section-container">
<template is="dom-bind" id="app">
<iron-ajax auto
url="https://www.googleapis.com/youtube/v3/search"
params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}'
handle-as="json"
last-response="{{ajaxResponse}}"></iron-ajax>
<template is="dom-repeat" items="[[ajaxResponse.items]]">
<div class="horizontal-section">
<h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2>
<iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image>
<p>[[item.snippet.description]]</p>
</div>
</template>
</template>
</div>
<script>
var app = document.querySelector('#app');
app.url = function (videoId) {
return 'https://www.youtube.com/watch?v=' + videoId;
};
</script>
</body>
</html>