Embed your YouTube channel on your Google site ~ Страницы Интернета

четверг, 1 сентября 2016 г.

Embed your YouTube channel on your Google site

15:28 By Guest Rooms "Varnaflats.eu" Google Site, script, site, video, YouTube No comments

Hi guys

After searching a lot, I share here how I embeded my YouTube channel on my google website. (It's really easy)

Steps:

Copy all this code and change the red text by your username:

___________

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="youtube channel" />
<Content type="html"><![CDATA[

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <style type="text/css">
#player {
  width: 435px;
  height: 300px;
  overflow: hidden;
  background: gray;
  position: absolute;
  border: solid 2px gray;
}

.youtube .carousel {
  width: 20%;
  height: 100%;
  overflow: auto;
  position: absolute;
  right: 0px;
  z-index: 3;
}

.youtube .thumbnail {
  margin: 2px;
  width: 80%;
  border: 1px solid black;
}

.youtube iframe.player {
  width: 80%;
  height: 300px;
  overflow: auto;
  border: 0;
}
  </style>

<div id="player">
  </div>

  <script language="JavaScript"  type="text/javascript">
  (function() {
  function createPlayer(jqe, video, options) {
  var ifr = $('iframe', jqe);
  if (ifr.length === 0) {
  ifr = $('<iframe scrolling="no">');
  ifr.addClass('player');
  }
  var src = 'http://www.youtube.com/embed/' + video.id;
  if (options.playopts) {
  src += '?';
  for (var k in options.playopts) {
  src+= k + '=' + options.playopts[k] + '&';
  }
  src += '_a=b';
  }
  ifr.attr('src', src);
  jqe.append(ifr);
  }

  function createCarousel(jqe, videos, options) {
  var car = $('div.carousel', jqe);
  if (car.length === 0) {
  car = $('<div>');
  car.addClass('carousel');
  jqe.append(car);

  }
  $.each(videos, function(i,video) {
  options.thumbnail(car, video, options);
  });
  }

  function createThumbnail(jqe, video, options) {
  var imgurl = video.thumbnails[0].url;
  var img = $('img[src="' + imgurl + '"]');
  if (img.length !== 0) return;
  img = $('<img>');
  img.addClass('thumbnail');
  jqe.append(img);
  img.attr('src', imgurl);
  img.attr('title', video.title);
  img.click(function() {
  options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
  });
  }

  var defoptions = {
  autoplay: false,
  user: null,
  carousel: createCarousel,
  player: createPlayer,
  thumbnail: createThumbnail,
  loaded: function() {},
  playopts: {
  autoplay: 0,
  egm: 1,
  autohide: 1,
  fs: 1,
  showinfo: 0
  }
  };


  $.fn.extend({
  youTubeChannel: function(options) {
  var md = $(this);
  md.addClass('youtube');
  md.addClass('youtube-channel');
  var allopts = $.extend(true, {}, defoptions, options);
  allopts.maindiv = md;
  $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
  var feed = data.feed;
  var videos = [];
  $.each(feed.entry, function(i, entry) {
  var video = {
  title: entry.title.$t,
  id: entry.id.$t.match('[^/]*$'),
  thumbnails: entry.media$group.media$thumbnail
  };
  videos.push(video);
  });
  allopts.allvideos = videos;
  allopts.carousel(md, videos, allopts);
  allopts.player(md, videos[0], allopts);
  allopts.loaded(videos, allopts);
  });
  }
  });

})();

$(function() {
  $('#player').youTubeChannel({user:'YouTube_username'});
});
  </script>

]]></Content>
</Module>

__________

Create a Google gadget using the Google Gadget editor
paste all the above code into the editor (erase the exisitng code on gadget editor)
Save it (never mind the preview tab cause it is not working)
Go to the top right of the gadget editor box where you see the 'your_file.xml' and press Right Click->Copy Web Link address
Go to your google site and edit the page where you want to see your youtube channel
Go to top left side of the screen and do Insert->More Gadgets->Add Gadget by URL->Paste the xml link
Save it

Good luck :)

It worked very fine for me

On the above code where you see the tag <style type="text/css"> you can customize you embedded window size

The above code was gotten from http://jsfiddle.net/SimoneGianni/NmvA9/ thanks to a nice programmer who shared it with everyone.

Страницы Интернета

четверг, 1 сентября 2016 г.