Forem: Deano

Optimized YouTube Embed Code Generator

Deano — Thu, 12 Mar 2020 12:36:05 +0000

YouTube allows you to easily embed any YouTube video into a web page on your site, however this involves using iframes, and YouTube runs some heavy scripts and external resources are needed from YouTube directly. This causes slower page load which sometimes appears in speed test results as possible improvements that can be made to speed your site up.

We have developed a custom embed code, so instead of chucking in iframes that connect straight to YouTube and call in scripts and other unnecessary data, we instead embed just the preview image onto your web page, if the user wants to play the video and they click the “play” button, the small script you embed into your site will then replace the image with YouTubes iframe player as you would do originally with an auto-play. As far as the user knows, the experience is completely the same. But you save a tremendous amount of resources being included on page load.

All you need to do is embed our custom JavaScript into your HEAD tag and our CSS rules in your CSS file. Then use the tool on our website below to generate the HTML tags for each video and place that in your site.

YouTube Embed Code Generator

Setup Instructions

Please make sure you add the following CSS and JavaScript to your site on any pages that will be using the embed code generated above, else it will not work.

Add the following Javascript anywhere on your site:

//youtube video code - can be added to head or in the footer or in an external JS file.
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
v[n].onclick = labnolIframe;
}
});

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) + this.dataset.ido);
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.append(iframe);
}

Add the following CSS to your CSS file:

.iframeresponsive {
    font-size: 0;
}
.youtube-player {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0;
    height: 100%;
}
.youtube-player img:hover {
    filter: brightness(75%);
}
.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;
    transition: .4s all;
}
.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}
.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAzCAYAAAA0CE5FAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGtmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wOC0wM1QxMjo1MDo1OCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDgtMDNUMTI6NTk6MTMrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDgtMDNUMTI6NTk6MTMrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MGYxZDlhYzItYzY2OS01NjQ3LThiZWMtNjk0MmM2NGQ0M2Y4IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YWY1ZTY2OGQtZWRiNS1hYTQzLTkyYjctYTBjOTJiZDE4Zjg1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MGFkNTA2NjUtMWRjMi0zYTRjLWI1NjItYjlhMjBlNGYyZDAxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowYWQ1MDY2NS0xZGMyLTNhNGMtYjU2Mi1iOWEyMGU0ZjJkMDEiIHN0RXZ0OndoZW49IjIwMTgtMDgtMDNUMTI6NTA6NTgrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjhjOGE0NTY0LTdmYTItY2Q0Ny1hNjAzLTZjNjgzMWY0NGYyZCIgc3RFdnQ6d2hlbj0iMjAxOC0wOC0wM1QxMjo1OToxMyswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MGYxZDlhYzItYzY2OS01NjQ3LThiZWMtNjk0MmM2NGQ0M2Y4IiBzdEV2dDp3aGVuPSIyMDE4LTA4LTAzVDEyOjU5OjEzKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm79JJEAAAeCSURBVGgF7cFbjNx1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) no-repeat;
    filter: grayscale(100%);
    cursor: pointer;
}
.youtube-player .play:hover {
    filter: grayscale(0%);
}

Embedding images in CSS

Deano — Wed, 04 Mar 2020 11:19:58 +0000

Embedding images into your CSS is one of those things that might sound unfavourable but in fact gives you many benefits. First and foremost it can lower the number of requests your webpage needs to make, every connection to every resource requires a handshake, negotiation and then download. The more you have in one file, generally the better the performance. This is why some tools will give hints such as embedding the image into the CSS or using Sprites (which I will not cover in this article, and which I think are a horrible HACK in general).

Please bare in mind, it is recommended you only do this for very small images, maximum 2KB in size – don’t use this technique for large images as you have to remember that the browser is going to be needing that CSS file in order to render your pages, so if you have a enormous CSS file it is really going to have an opposite effect and will cause serious bottleneck to your web page load times.

So if you have things like buttons, small badges, small background images then you should seriously consider embedding them into the CSS to save on requests and resource load times.

So this is achievable by generating a BASE64 encoded string of the image file and then referencing it in CSS, much like when you embed an image into HTML IMG tags. We have a tool already which can take an image file and convert it to a BASE64 embeddable string which you can find below.

Embed Image into CSS (Online Tool)

Let us know what you think of the tool.

How to embed image into CSS

The first thing you are going to want to do is convert your image into a BASE64 encoded string, the tool above can do this for you, and here is an example image I have done:

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHBsdHBsdHRsdHBsdHRsdHRsdHRsdHRsdHRsdHRsdHRsbLR8cKR4dHRsdHRsdHRsdHhsbLh8cJR0dHRsdHRsdHRsdHRsdGRoQkzkRjjgdHxwdHRsdHBscKh4RkTkQlzoeGBodHRsdHRsdHRsdGxoPnjwShDUdHRsdHRsdIRwRjjgPpT4dGxodHRsdHRsdGhodGxodHRsdHRsdHRsdHRsdGhodGxsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRv////7os7KAAAAgnRSTlMAACwUkJMVAgMg0P2sDjFtfIRxYGzA/vRALsjj7fxRSs/uo0/S97vi1deG5Ln1+1617/ngjxpi8wkzVVtHHjDRzhM+d2AZZXU02JE6TpdYf4ofJZV6Vpw/X68wb4CYsreTnUFBWg0POypBlTyNRxpORAplhHsFC4d8agEvagwRWGcm60v5hgAAAAFiS0dEg/y0z9IAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRAONDUj+gG9AAAA40lEQVQY02NggAFGRiZmRgYkwMjIwsrGyAhmsXMwAgEnFzcPLyOIz8cvICgkLCIq1iQuwQjkS0pJy8g2gYGsHCODPKtCExwoKikzqKgi+GJq6hoMsk2aWtpQAR1WblUGXT19RgkDQ24xI2MTUzMxcwYudU5GRgtLK2sbW3ZGO0N7BlYHRydnF0dGRlc3dw9XTy8Gb2sfXz//gMCg4JDQsPAIDwZms8io6JjYuPiExKRknpRUhjR5pfSMzKxsn5zcvPywgkKgS73DiopLSsvKKyrDmMB+q6qukatlZKyrb2gEehYAric3QRp0bvoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMTZUMTQ6NTI6NTMrMDI6MDDFuhn/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTE2VDE0OjUyOjUzKzAyOjAwtOehQwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==

To embed this into CSS you would do this:

.myclass {
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHBsdHBsdHRsdHBsdHRsdHRsdHRsdHRsdHRsdHRsdHRsbLR8cKR4dHRsdHRsdHRsdHhsbLh8cJR0dHRsdHRsdHRsdHRsdGRoQkzkRjjgdHxwdHRsdHBscKh4RkTkQlzoeGBodHRsdHRsdHRsdGxoPnjwShDUdHRsdHRsdIRwRjjgPpT4dGxodHRsdHRsdGhodGxodHRsdHRsdHRsdHRsdGhodGxsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRsdHRv////7os7KAAAAgnRSTlMAACwUkJMVAgMg0P2sDjFtfIRxYGzA/vRALsjj7fxRSs/uo0/S97vi1deG5Ln1+1617/ngjxpi8wkzVVtHHjDRzhM+d2AZZXU02JE6TpdYf4ofJZV6Vpw/X68wb4CYsreTnUFBWg0POypBlTyNRxpORAplhHsFC4d8agEvagwRWGcm60v5hgAAAAFiS0dEg/y0z9IAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBRAONDUj+gG9AAAA40lEQVQY02NggAFGRiZmRgYkwMjIwsrGyAhmsXMwAgEnFzcPLyOIz8cvICgkLCIq1iQuwQjkS0pJy8g2gYGsHCODPKtCExwoKikzqKgi+GJq6hoMsk2aWtpQAR1WblUGXT19RgkDQ24xI2MTUzMxcwYudU5GRgtLK2sbW3ZGO0N7BlYHRydnF0dGRlc3dw9XTy8Gb2sfXz//gMCg4JDQsPAIDwZms8io6JjYuPiExKRknpRUhjR5pfSMzKxsn5zcvPywgkKgS73DiopLSsvKKyrDmMB+q6qukatlZKyrb2gEehYAric3QRp0bvoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMTZUMTQ6NTI6NTMrMDI6MDDFuhn/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTE2VDE0OjUyOjUzKzAyOjAwtOehQwAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==);
}

And thats it!

jQuery: How to show a warning when CAPSLOCK is on

Deano — Wed, 04 Mar 2020 02:06:56 +0000

I've wrote a light-weight jQuery script which allows you to easily show a warning under a field when the CAPS LOCK key is active, the script requires no plugins or require any manual placement of any HTML.

Simply drop the java-script below onto any pages you require the warning and just configure what fields you want it to work on, the script will then do the rest as needed.

I wrote this script because I didn't want to be messing around adding hidden HTML portions under fields or any other modifications, simply wanted to drop my script on a page, point to the input fields of interest and have it do its magic for me.

I realised quickly that I needed the field to hover just below the input fields too so that no HTML on the page is shifted when the warning appears, so this CAPS warning actually floats just below the field being activated on.

It also automatically destroys itself after 5 seconds which you can change if required, and finally if you click the warning that also destroys it from the screen. Handy for when the warning might get in the way of elements etc.

Of course if you dont feel my styling, you're more than welcome to modify the CSS parts of the jQuery to your own liking - change the auto-removal timing or remove as necessary.

//CAPS LOCK WARNING
//change #password below to either an ID of the field you want
//you could use a class ie. .password or any other jquery selector.
//this works fine with one block on multiple fields, so ie. #password, #password2

//on the setTimeout you can change 5000 to an amount of seconds you want until the warning auto-disappears

$('#password').keypress(function(e) { 
    var s = String.fromCharCode( e.which );

    var pfield = $(this).position();

    //check whether the input is in caps and the shiftkey isnt being pressed
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) ||
       (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)){
       //check to see if the capsalert is already present
        if ($(this).parent().find('#capsalert').length < 1) {
            $('#capsalert').remove();
            //caps alert HTML, edit as necessary
            $(this).after('<b id="capsalert" onclick="$(this).remove();">WARNING: Caps-Lock is on!</b>');
            //the css for the caps alert, modify as necessary
            $('#capsalert')
                .css('position', 'absolute')
                .css('top', (pfield.top + $(this).outerHeight() + 1) + 'px')
                .css('left', (pfield.left) + 'px')
                .css('border-radius', '5px')
                .css('padding', '5px')
                .css('cursor', 'pointer')
                .css('background-color', '#ffe599')
                .css('border', '1px solid #e6ab00');

            //the timeout for the capsalert
            setTimeout(function(){
              $('#capsalert').remove();
            },'5000');
        }
    } else {
        //removes any alerts once it detects no caps lock
        $('#capsalert').remove();
    }
});