A couple of YouTube videos, some simple Google formulas and a Google Spreadsheet – that’s all you need to quickly create a YouTube playlist. It will be an anonymous playlist, not connected to your YouTube channel, and may be a good way to bunch together multiple videos for easy sharing on WhatsApp, Twitter or an email newsletter.
To get started, open this Google Sheet and put the URLs (links) of YouTube videos in column A (one video per cell, starting with Cell A3). As you paste the video links in cell A, the column B gets populated with the video ID while column C will include a video thumbnail. This helps you double-check that the video URL is actually pointing to the intended video.
After you are done writing the video URLs, go to cell A1 (see tutorial) and you’ll find a link to your YouTube playlist ready for sharing with the world. If you add or remove videos from column A, the playlist link will be updated automatically. Simple. You can share the Google sheet with other people and collaborate together to build a YouTube playlist.
You can make #YouTube playlists with #GoogleSheets in a minute ? https://t.co/1SLDNPbvrc http://pic.twitter.com/3iVxzujZWe
— Amit Agarwal (@labnol) October 5, 2016
When you paste the video URL in column A, the REGEXTRACT formula uses the following regex to extract the ID of the YouTube video.
=REGEXEXTRACT(A3, “youtu(?:.*\/v\/|.*v\=|\.be\/|.*?embed\/)([A-Za-z0-9_\-]{11})”)
Once video ID is available, the IMAGE formula is used to create the video thumbnail for that YouTube video.
=IMAGE(“http://ift.tt/2dso38y;, 4, 80, 120)
Now comes the most interesting part – generating the YouTube playlist. Well, that’s a simple URL hack where we concatenate the video IDs with the JOIN() method and make a live link using the HYPERLINK() method.
=HYPERLINK(“https://www.youtube.com/watch_videos?video_ids=”&join(“,”,B3:B);”Link”)
Also see: How to Copy YouTube Playlists
These YouTube playlists, generated on-the-fly, are not saved in your Google account. You can also build a permanent YouTube playlist where multiple people can collaborate with a Google Form and Google Scripts. Check out this project written by Martin Hawksey. Thank you Tor Halvor Solheim for the idea.
The story, How to Make YouTube Playlists with a Google Spreadsheet, was originally published at Digital Inspiration by Amit Agarwal on 05/10/2016 under Google Spreadsheet, YouTube, Internet.
How do you embed the audio portion of any YouTube video into your website? An easy option would be that you convert the YouTube video into an MP3 file and upload it to an audio hosting site like Soundcloud. This will work but YouTube is very likely to have a problem with your approach due to copyright issues.
There’s a simpler approach as well that uses the official YouTube API and requires no file conversion.
You can embed any YouTube video in your web pages and visitors on your site will be able to play and pause the video audio with a simple click. With this technique, you can also use a YouTube video as background audio that runs in a loop.
Check out this live demo. It may resemble an embedded audio player but there’s actually this YouTube video that’s playing in the background.
It takes just one step to embed a YouTube audio. Open any YouTube video and make a note of the YouTube Video ID (a string of 11 characters).
Next copy-paste the code below anywhere on your website and replace VIDEO_ID with actual ID of your YouTube video.
<div data-video="VIDEO_ID"
data-autoplay="0"
data-loop="1"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="http://ift.tt/2cPXBSW;
There are few other configuration parameters that you can change depending on requirements. For instance, if you set data-autoplay to 1, the audio will begin playing immediately on page load. Likewise, set data-loop to 1 and the audio will play continuously in a never-ending loop until manually stopped.
This internally renders the YouTube video using the IFRAME player and would thus work on both desktop and mobile browsers.
The JavaScript files are hosted on Github while the images are hosted on Imgur. It is recommended that you copy the assets to your own server before deploying on a heavy-traffic website.
We are using the YouTube JavaScript API that renders a regular YouTube player but with the width and height set to 0 pixels. When the user clicks the audio button, it toggles the existing YouTube player state and the video begins to play or pauses.
Here’s the annotated version of the source code. It can be extended to embed YouTube playlists, the default playback volume can be changed or you even embed a part of the video.
The story, How to Embed YouTube as an Audio Player, was originally published at Digital Inspiration by Amit Agarwal on 03/10/2016 under Embed, YouTube, Internet.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
