Struggling To Load Youtube Player On-demand Rather Than Traditional Embed

I am trying to speed the load time of my site. I have a Youtube video that is embedded with traditional IFRAME. I found this article, but it doesn't seem to work for me. I must be doing something wrong,

http://www.labnol.org/internet/light-youtube-embeds/27941/

I added the JS and CSS to my site properly (my wordpress theme has a built in area for my to paste it). I added the HTML to the container where I want the video to appear, and I changed the VIDEO-ID as per the instructions. There is now just a blank area where the video should be, but when you hover over it you can see it is linked based on your cursor. When you click it, nothing happens.

I am testing it on this page... the video should appear in the upper fold to the right of the picture of the man:

https://www.yogabearpc.com/laptop-repair/

If anyone can figure this out I would be greatly appreciative

You have your javascript bad written. You have 2 <script> tags:

<script id="mfn-dnmc-custom-js" type="text/rocketscript">
//<![CDATA[
<script>
(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;
        v[n].appendChild(p);
    }
})();
[...]
</script>
//]]>
</script>

When you input your custom javascript into your 'special builtin area', you don't need to add the <script> and </script> tags, the theme will do that for you.