WhatsApp Messenger video calls is made available on Android – Things You should Know about

WhatsApp Messenger is backed by social media giant Facebook. Currently, WhatsApp has been rolling out newly updated versions for making their free messaging service better. WhatsApp latest beta update for Android brings the most awaited feature that enables user to make video calls. Here are a few things to notice.

WhatsApp video calls

A few months back, it was rumored that WhatsApp team has been trying to develop the video calling feature for this Messenger. Video calls on WhatsApp was among the best feature for this app. Plus all of this are completely Free worldwide.

WhatsApp has more than 1 billion active users, and has been a great messaging apps for Android that has almost everything for the communication over the internet. Says, it’s voice call, send and receive IMs, support for animated GIFs, and now, WhatsApp video calls. Such a compilation of good features in such a great application.

WhatsApp video calling on Android

Earlier this week, many Android news coverage have already reported the WhatsApp newly updated beta version that has a significant feature of video calling.

Android Police has seen the WhatsApp video calls on Android started popping –up for some users in the beta testing program of WhatsApp Messnger.

As for the WhatsApp video calling feature for Windows Phone and iOS, things are pretty much the same. Some users of the app started to have the taste of video calls on their WhatsApp earlier this month.

How to download and install WhatsApp beta version

Notice that WhatsApp video calling feature is now available in the WhatsApp beta updated version. Therefore, thing that you need to do now is either waiting for the stable version of WhatsApp with the video calls coming a little later, or joining the WhatsApp beta testing program.

To become a beta tester, just head over the WhatsApp official website then choose to download and install the WhatsApp Messenger beta from Google Play Store.

You will be able to make both voice and video calls on WhatsApp for Android now. Even though WhatsApp has official advertised for the feature, many users tend to have enjoyed time with WhatsApp video calls already.

Notice on WhatsApp Messenger video calls

To enjoy the WhatsApp video calling feature, one first requirement is your chat partner also have to get the same WhatsApp beta updated version. If not then you won’t be able to make a video call.

So, once you’ve got the WhatsApp updated version with video calling feature, don’t forget to tell your friends that she/he should update WhatsApp Messenger as well.

The Best Method for Embedding YouTube Videos on your Website

It is very easy to embed a YouTube video to your webpages but do you 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 also the browser has to make multiple HTTP requests to render the video player. This will increase the overall loading time of your page this will effect  the page speed score. The other drawback with the default YouTube embed code is that it is not responsive at all. If people view your website on a mobile phone, the video player is not gonna resize properly for the small screen mobiles.

Embed YouTube Videos without Increasing Page Size

Google+ uses a wise technique for embedding YouTube videos – it will 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 only about 15 kB in size so we can reduce the byte size of web pages by 500+ kb. 

The video above is embedded using the same 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.

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://labnol.org/?p=27941 */
 
    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="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            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 yoursite 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.