My favorites | Sign in
Logo
                
Search
for
ExampleYouTube  
YouTube から動画を取得して、サムネイルをリスト表示します。

jQuery.getJSON を使って YouTube から新着の動画を取得し、そのサムネイルをリスト表示しています。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="YouTube - opensocial-jquery">
<Require feature="dynamic-height" />
<Require feature="settitle" />
</ModulePrefs>
<UserPref name="tag" default_value="dog" required="true" />
<Content type="html"><![CDATA[
<script type="text/javascript" src="http://example.com/opensocial-jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {

  // Retrieves a preference as a string.
  var tag = $.pref('tag');

  // Sets the gadget title.
  $(window).title(tag + ' - YouTube');
  
  // Fetches content from the YouTube that content into the callback function.
  var url = 'http://gdata.youtube.com/feeds/videos';
  var data = { vq: tag, 'max-results': 21, alt: 'json' };

  $.getJSON(url, data, function(json) {

    $.each(json.feed.entry, function() {

      var img = $('<img width="80" heieht="60" />')
	.attr('src', this.media$group.media$thumbnail[0].url);

      $('<a target="_blank" />')
        .attr('href', this.media$group.media$player[0].url)
        .append(img)
        .appendTo('#videos');
    });

    // Adjusts the gadget height.
    $(window).adjustHeight();
  });

});
</script>
<style type="text/css">
<!--
#videos img {
  border: 0;
  margin: 2px;
  width: 80px;
  height: 60px;
}
-->
</style>
<div id="videos"></div>
]]></Content>
</Module>

Sign in to add a comment
Hosted by Google Code