<!doctype 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/classes/typography.html"> <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html"> <link rel="stylesheet" href="../../paper-styles/demo.css"> <style> iron-image { background-color: lightgray; margin: 1em; } </style> </head> <body> <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> <h1>Video Feed</h1> <section class="flex layout horizontal wrap"> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div> <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> </section> </template> <script> var app = document.querySelector('#app'); app.url = function (videoId) { return 'https://www.youtube.com/watch?v=' + videoId; }; </script> </body> </html>