31 August 2016

A Better Method for Embedding YouTube Videos on your Website


It is easy to embed a YouTube video but you’ll be surprised to know how much extra weight that embedded YouTube video can add to your web pages. The browser has to download about half a Mb of extra JavaScript files (see screenshot) for rendering the YouTube video player alone. And these files are downloaded even if the visitor never plays the embedded video.

The embedded video not only increases the byte size of your web pages but the browser has to make multiple HTTP requests to render the video player. This increases the overall loading time of your page thus affecting 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 may not resize properly for the small screen.

Embed YouTube Videos without Increasing Page Size

Google+ uses a clever technique for embedding YouTube videos – it just embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail.

YouTube thumbnail images are about 15 kB in size so we are able to reduce the byte size of web pages by 500+ kb. That’s huge!

The video above is embedded using the same on-demand technique (demo).

When a visitor clicks the play button, the thumbnail image is replaced with the standard YouTube video player with autoplay set to 1 so the plays the video instantly. The advantage is that the extra YouTube JavaScript gets loaded only when someone decides to watch the embedded video and not otherwise.

Light and Responsive YouTube Embeds

The standard embed code for YouTube uses the IFRAME tag and the width and height of the video player are hard-coded thus making the player non-responsive.

The new on-demand embed code for YouTube is slightly different. You need not specify the player size as we are now embedding the video responsively. Also, the IFRAME is replaced with a DIV tag and the IFRAME is added to the page only when the visitor clicks the play button.

YouTube Embed Code

Embed YouTube Videos Responsively – Tutorial

Copy-paste the following snippet anywhere in your web page where you would like the YouTube video to appear. Remember to replace VIDEO_ID with the actual ID of the YouTube video.

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

We will not assign height and width since the video player will automatically occupy the width of the parent while the height is auto-calculated. You can paste multiple DIV blocks with different video IDs if you need to embed multiple videos on the same page.

Next, place the JavaScript anywhere in your web template. It finds all embedded videos on a web page and then replaces the DIV elements with the video thumbnails.

<script>

    /* Light YouTube Embeds by @labnol */
    /* Web: http://ift.tt/2bGFoam */

    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });

    function labnolThumb(id) {
        var thumb = '<img src="http://ift.tt/2bGFpex;,
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id);
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }

</script>

Finally, paste the CSS before the closing head tag of your web template.

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

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>

Please do note that Chrome and Safari browsers on iPhone and Android only allow playback of HTML5 video when initiated by a user interaction. They block embedded media from automatic playback to prevent unsolicited downloads over cellular networks.

YouTube Embed Tutorials

  1. Embed a YouTube Video with Sound Muted
  2. Place YouTube Video as your Webpage Background
  3. Embed Just a Portion of a YouTube Video

The story, A Better Method for Embedding YouTube Videos on your Website, was originally published at Digital Inspiration by Amit Agarwal on 31/08/2016 under Embed, YouTube, Internet.

How to Create Forms that allow File Uploads


Google Forms are probably the best service for creating online forms but they miss a few key features found in commercial web form builders. Google Forms do not allow file uploads, there’s no option for adding CAPTCHA in forms to prevent spam and, what may be of interest to the legal and retail industry, Google Forms cannot capture electronic signatures.

A school teacher may want a Google Form where students can upload assignments and the files are automatically saved to her Google Drive but in separate student folders. A company may want to build an online form where job applicants can upload their resumes in PDF or Word format. You cannot upload file attachments in Google Forms but there’s a workaround.

google-forms-file-uploads.png

Form with File Uploads – Demo | Buy License

Open this sample web form and you’ll find that it has all the fields found  in native Google Forms but a few extra ones. There’s a file upload button (demo), an area for visitors to e-sign the form (demo) and a CAPTCHA.

The form looks exactly like a Google Form and when you press the submit button, the files are sent to the form owner’s Google Drive while the entered data is saved in a Google Spreadsheet.

The form is integrated with Google Analytics so you can also track how many people opened your form, what browser they used and more. You can even choose to receive email notifications when people submit the form.

Add File Uploads to Forms with Google Script

The forms are built using Google Apps Script and you too can build one in minutes with absolutely zero coding. Watch the video tutorial to get started.

You’ll need to buy a license to use the form upload script.

Configure & Install your File Upload Form

The first step is to create the form. If you know a bit of HTML, you can design the form yourself or use forms.studio. This is WYSIWYG form builder where you can drag and drop fields to build your form. Save the form and copy the embed code to your clipboard.

Now that you have the form code ready, you need to configure the Google Spreadsheet that will store your form responses.

Open your Google Spreadsheet and go to Tools -> Script Editor. Click the forms.html file and paste the form embed code. Save the file.

  1. Go to Resources -> Developer Console Project and enable the Google Picker API. This will allow the form visitors to upload files directly to your Google Drive.
  2. Open the install.gs file and specify the Drive folder where files would be stored, your time zone and the email address.
  3. Go to Run -> Install to apply your configuration. You may have to authorize the first time you install the Google script.
  4. Go to Publish -> Deploy as Web App, choose Me form Execute the app as and choose Anonymous under Who has access to the web app.

deploy-google-form.png

We are almost done.

Click the Deploy button and you’ll be presented with the public URL of your form. You can use Gmail Mail Merge to send the form to all your contacts in a personalized email.

Things to Know – File Upload Forms

  • If you wish to restrict the forms to users inside your Google Apps organization, choose your domain under Who has access to the app.
  • Unlike Google Forms, file upload forms cannot be embedded on other websites due to some restrictions around web apps made with Google Scripts.
  • If you later change any parameters in the install.gs file, you need to go to Run->Install to apply the new configuration.
  • To stop accepting new responses, go to Publish -> Deploy as web app menu and click the Disable link. Or change the Who has access option to Myself.

The story, How to Create Forms that allow File Uploads, was originally published at Digital Inspiration by Amit Agarwal on 30/08/2016 under Google Drive, Google Forms, Internet.

26 August 2016

Play Solitaire and Tic Tac Toe in Google Search


Google Search now comes with 2 games you can play right from your desktop or mobile browser: Solitaire and Tic-Tac-Toe. Just search for [solitaire] or [tic tac toe] and you can quickly start the games.

Solitaire has 2 difficulty levels: easy and hard. The game has realistic sounds and animations (you can mute sounds) and it also shows your stats, just like any other Solitaire app. Unfortunately, Google doesn't save your state, so you can't resume a game later.


Tic-Tac-Toe is much simpler and less pretty. You can choose between 3 difficulty levels (easy, medium and impossible) or pick an option that lets you play against a friend. The easy level always lets you win, the medium level lets you win sometimes, while in the impossible level you can never win.


An older game you can still play from Google Search is Pac-Man. It's actually the interactive doodle from May 21, 2010.



{ via Google Blog }

10 August 2016

How to Monitor your Website’s Uptime with Google Docs


Would you like to receive instant alerts as soon as your website goes down or is inaccessible to users? Would you like to receive these downtime alerts as an email message or text on your mobile phone or both?

Most website monitoring services follow the “freemium” model – they have free plans for basic downtime & uptime monitoring of a website but need to pay for unlimited email or SMS alerts. You may also need to upgrade to monitor multiple websites. There’s a good alternate though.

website-monitor.png

Create your own Website Uptime Monitor with Google

You can create your own website monitor that runs on Google servers and sends email alerts or SMS when your website goes down or is up again. It logs everything in a Google Spreadsheet or you can even store the downtime activity inside Google Analytics.

How to Setup Website Monitor

Here’s how you quickly configure Google Docs to monitor the uptime /downtime of your website. This has to be done just once and the spreadsheet will continuously monitor your sites in the background. Let’s get started:

  1. Click here to copy the website monitoring Google sheet into your Google Drive. You may either use your Gmail or Google Apps account to sign-in.
  2. Go to the Website Monitor menu (near Help) and choose Configure. You may have to authorize the sheet the first time you configure the monitor.
  3. Specify your website URL and the email address where you wish to be notified. You can put multiple addresses separated by commas.
  4. [Optional] Enter the Google Analytics Id (e.g., UA-123456-78) and the site monitor will log downtime / uptime events in  your Analytics account.
  5. You can turn on “Get text messages” to receive download alerts by SMS* on the mobile phone connected to your Google account.

Click the Start button and the Google sheet will start monitoring your website in the background. You can close the sheet.

The uptime and downtime times are logged in theGoogle Spreadsheet so you can use that data to analyze the performance of your web hosting company.

How Website Monitor works with Google Docs

Internally, a Google Script attached to the Google Sheet is doing the monitoring and logging events in Google Sheets and Google Analytics.

The script triggers every few minutes and then tries to fetch your website using URLFetchApp, a Google service similar to wget or curl. If the HTTP response code is anything other than 200, it indicates that there’s an issue with your website and an email alert is sent.

Sending SMS Alerts via Google Sheets

Google Apps Script can send email messages through Gmail but uses a workaround for sending SMS text messages. It creates an event in your default Google Calendar with an SMS reminder  – the event is set to expire in 30 seconds and thus you get an instant text alerts on your mobile.

Also see: Get SMS Alerts for Important Gmail Messages

*The SMS option is however only available to Google Apps for Work accounts. If you aren’t getting text alerts on your phone, please ensure that your phone number is associated with Google Calendar as detailed in this tutorial.


The story, How to Monitor your Website’s Uptime with Google Docs, was originally published at Digital Inspiration by Amit Agarwal on 10/08/2016 under Google Analytics, Google Docs, Internet.

08 August 2016

How to Set Expiration Dates for Shared Google Drive Files


When you share any file or folder in Google Drive with another user, the shared links will work forever unless you manually change the sharing permissions. For instance, if you have shared a document with an external vendor, they’ll continue to have access to the file long after your business contract may have ended.

In such a situation, wouldn’t it be nice if you could set expiration dates while sharing files in Google Drive? For instance, share a document temporarily for, say, 10 days and access to the file should be revoked automatically after that period has passed.

Add an Auto-Expiry Date for Shared Links in Google Drive

Google Drive does let you set expiration dates for shared links but this option is only available to paid Google App for Work accounts.

Well, no worries. If you have a free Google account, you can still create temporary links that auto-expire after a certain time. Here’s a step by step guide:

  1. Go to labnol.org/expire and authorize the web app to access your Google Drive.
  2. Open the File Picker and select any file or folder in your Google Drive that you would like share.
  3. Enter one or more email addresses (comma separated) of users who should be given viewer (read-only) or editor (read & write) access to your file.
  4. Finally, specify the time period after which the access should be limited. You can say 5 hours or 3 weeks or even 2 years.

Click the “Set Expiration” button and you are done. The Google Script will set a time-based trigger that will automatically remove the specified user from the access list after the specified date and time.

You can also use the Google Drive Auditor add-on to analyze the shared permissions of every file in your Google Drive and know who can see your files.

The auto-expiry app will list all the files and folders that are set to expire after a certain period. You can click the “cancel” link against any Drive link to prevent that shared link from expiring automatically.

Select File in Google Drive

Auto Expire Google Drive Shared Links

Also see: Make a Google Drive Tree (video)


The story, How to Set Expiration Dates for Shared Google Drive Files, was originally published at Digital Inspiration by Amit Agarwal on 08/08/2016 under Google Drive, Internet.

How to Make Pixel Paintings with Google Spreadsheets


You may have been using Google Spreadsheets for budgeting and project management but did you know that the same sheets application can also help you create impressive pixel paintings in minutes? The Google blog recently published a story of two illustrators who created a bright and beautiful wall mural using Google Spreadsheets.

Marina and Mallory connected on Google Hangouts to plan and sketch out ideas, and creatively “hack” Sheets in order to make art: resizing cells into thousands of pixel-like squares, merging cells to create color blocks, creating vibrant color gradients with conditional formatting and cell values, and other cool things we had no idea you could do with Sheets.

The idea is simple. Each cell in the spreadsheet corresponds to a pixel in the painting. You compute the color of the pixel and make it the background color of the corresponding cell. Now resize the spreadsheet cells in small perfect squares and your spreadsheet will look exactly like the original artwork.

How to Paint with Google Spreadsheets

If you would like to create your own spreadsheet art but don’t have the time to carefully paint every cell manually, here’s a simple workaround for you. You can take any photograph, vector art, or any other image and use a Google Script to convert that bitmap image into spreadsheet art.

Watch the video tutorial  or open this Google Sheet for sample artwork.

Create Pixel Art with Google Sheets

It takes few easy steps to make pixel art with Google Sheets. You can use any free image but make sure they are 300 pixels or less for optimal performance.

  1. Open the Google Spreadsheet template and copy it to your own Google Drive.
  2. Go to the Spreadsheet Art menu, choose the Image Upload option and select the picture that you’ve downloaded in the previous step.
  3. The sheet will now parse every single pixel of your image and write the corresponding hex color codes in the spreadsheets cells.
  4. Select the “Apply Colors” option and the Google Script will set the background color of every spreadsheet cell equal to the cell value.
  5. The cells in the spreadsheet are rectangles whereas pixels are perfect squares. Select step 3 to resize every cell in the spreadsheet as a square.

And that’s it. Your spreadsheet art is now ready.

The end result may appear slightly pixelated (video) because we have used a small image as the source template but impressive nonetheless. You can download the Google Sheet as a PDF file or save it in Microsoft Excel format.

google-spreadsheet-art.jpg

Pixel Paintings made with Google Spreadsheets – Link


The story, How to Make Pixel Paintings with Google Spreadsheets, was originally published at Digital Inspiration by Amit Agarwal on 08/08/2016 under Google Docs, Software.