08 April 2015

Shared With Me, Removed From Google Play Music

Google Play Music had a special playlist called "Shared with me", but it's no longer available. The playlist included all the songs shared with you by Google+ users.

Here's how Google described this feature: "Share a free play of the songs and albums you've purchased on Google Play with your friends on Google+. They can share their purchases with you too. Forget the name of that song shared with you last week? No problem, you can find all of the music shared with you in your 'Shared with me' auto playlist."

The auto playlists section from the sidebar only has 4 auto playlists: "queue", "thumbs up", "last added" and "free and purchased".

{ Thanks, Boris Larson. }

07 April 2015

Incredible Art Made Entirely In Google Drawings

Google Drawings is a simple Microsoft Paint like diagramming application that is commonly used for creating flowcharts and diagrams inside documents and presentations on Google Drive. It offers a few elementary tools before you dismiss Drawings as not worthy of any serious work, take a look at Joshua Pomeroy’s art and you’ll be amazed.

Google Drawings

Google Drawings in Google Drive

Google Drawing - Leonard Nimoy

Creating Art in Google Drawings

Joshua is a Michigan-based visual artist and he uses this basic Google Drawings app to create some very impressive and detailed vector portraits. You can browse through his work on Google Plus and all these images are created entirely inside Google Drawings.

If you are curious to know such incredible art was made, Joshua has uploaded a series of video tutorials on YouTube where he explains how he goes about creating these digital paintings from photographs inside Google Drive.

The story, Incredible Art Made Entirely In Google Drawings , was originally published at Digital Inspiration by Amit Agarwal on 07/04/2015 under Google Drive, Internet.

A More Efficient Method for Embedding YouTube Videos

When you embed any YouTube video on your website using standard IFRAME tags, you’ll be surprised to know how much extra weight that YouTube video will add to your page. The web page has to download ~0.5 MB of extra resources (CSS, JavaScript and images) for rendering the YouTube video player and the files will download even if the visitor on your website has chosen not to watch the embedded YouTube video.

YouTube Player - Waterfall

The embedded video is making your page heavy and the visitor’s browser will also need to make multiple HTTP requests to render the video player. This increases the overall loading time of your page and thus affects the page speed score. The other drawback with the default YouTube embed code is that it isn’t responsive. If people view your website on a mobile phone, the video player would not resize itself accordingly.

Load YouTube Video Player On-Demand

Google Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can incorporate a similar approach approach for our websites as well.

Instead of embedding the full Youtube video player, Google+ displays just the thumbnail images of a YouTube video and a “play” icon is placed over the video so that it looks like a video player. The following video is embedded using the same technique:

When the user hits the play button, the video thumbnail is replaced with the standard YouTube video player with autoplay set to 1 so it plays the video instantly. The extra player-specific resources are thus loaded only when the user has decided to play the embedded video and not otherwise.

The regular embed code for YouTube looks something like this. You specify the height of the player (in pixels), the width and the unique ID of the YouTube video.

<iframe width="320" height="180"

Embed YouTube Videos Responsively without Increasing Load Time

The on-demand embed code for YouTube is slightly different since we are now embedding the video responsively and also because the IFRAME embed code is added only then user clicks the play button.

Copy-paste the following snippet anywhere in your web page where you would like the video to appear. Remember to replace VIDEOID with the actual ID of the YouTube video. The CSS and JavaScript codes are added to the template separately. Also, there’s no need to add the height and width parameter since the video will automatically occupy the width of the parent while the height is auto-calculated.

<div class="youtube-container">
<div class="youtube-player" data-id="VIDEOID"></div>

You can copy-paste multiple blocks on the same page incase you need to embed multiple videos on the same page. The code will stay the same except that you need to change the VIDEOID for each of the blocks.

The JavaScript

The JavaScript function will scan your pages for embedded YouTube videos. If found, it will add the corresponding thumbnail image and also add the onclick event listener that will do the actual magic – replace the image with the actual YouTube video in autoplay mode.

(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;

function labnolThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';

function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);


Open the CSS file of your website and paste the following snippet. If you don’t have a separate CSS file, you can also place it before the closing head tag of your web template.

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://ift.tt/1CPNq9I;) no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

This method will reduce the size of your webpages by 300-400 KB while making your site mobile friendly. You may refer to the annotated code to understanding how on-demand embedding works.

Also see: Embed Google Maps Responsively

The story, A More Efficient Method for Embedding YouTube Videos , was originally published at Digital Inspiration by Amit Agarwal on 06/04/2015 under Embed, YouTube, Internet.

Google Now Card for Google+ Stories

Google Now shows a new card for Google+ Stories. Google automatically generates stories using the images you upload to Google+ Photos. "Your best photos are automatically chosen and arranged in a fun timeline to show the highlights of your trip or event," explains Google.

Until now, users only received Google+ notifications.

{ Thanks, Angelo Giuffrida. }