1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12<head> 13 14 <title>iron-ajax</title> 15 16 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 17 <link rel="import" href="../../polymer/polymer.html"> 18 <link rel="import" href="../../promise-polyfill/promise-polyfill.html"> 19 <link rel="import" href="../iron-ajax.html"> 20 <link rel="import" href="../../iron-image/iron-image.html"> 21</head> 22<body unresolved> 23 <h1>Video Feed</h1> 24 <dom-module id="iron-ajax-demo"> 25 <template> 26 <style> 27 iron-image { 28 background-color: lightgray; 29 margin: 1em; 30 } 31 .horizontal-section-container { 32 display: flex; 33 display: -ms-flexbox; 34 display: -webkit-flex; 35 -ms-flex-pack: center; 36 -webkit-justify-content: center; 37 justify-content: center; 38 -ms-flex-wrap: wrap; 39 -webkit-flex-wrap: wrap; 40 flex-wrap: wrap; 41 } 42 .horizontal-section { 43 background-color: white; 44 padding: 24px; 45 margin-right: 24px; 46 min-width: 200px; 47 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 48 0 1px 5px 0 rgba(0, 0, 0, 0.12), 49 0 3px 1px -2px rgba(0, 0, 0, 0.2); 50 max-width: 300px; 51 margin-bottom: 24px; 52 } 53 </style> 54 55 <iron-ajax auto 56 url="https://www.googleapis.com/youtube/v3/search" 57 params='{"part":"snippet", "q":"polymer", "key": "AIzaSyAuecFZ9xJXbGDkQYWBmYrtzOGJD-iDIgI", "type": "video"}' 58 handle-as="json" 59 last-response="{{ajaxResponse}}"></iron-ajax> 60 61 <div class="horizontal-section-container"> 62 <template is="dom-repeat" items="[[ajaxResponse.items]]"> 63 <div class="horizontal-section"> 64 <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> 65 <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> 66 <p>[[item.snippet.description]]</p> 67 </div> 68 </template> 69 </div> 70 </template> 71 72 <script> 73 window.addEventListener('WebComponentsReady', function() { 74 Polymer({ 75 is: 'iron-ajax-demo', 76 77 url: function(videoId) { 78 return 'https://www.youtube.com/watch?v=' + videoId; 79 } 80 }); 81 }) 82 </script> 83 </dom-module> 84 85 <iron-ajax-demo></iron-ajax-demo> 86</body> 87</html> 88