Tutorial & code

Faster YouTube Videos

This uses the Beaver builder HTML module and speed up page load by serving only YouTube thumbnail until the play button is clicked.

VIDEO
CODE

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Modules Nav

Video

Notes

The video above is from 2016. I may updated it but this template is so easy it does not need one. The video is also a
a working example as it is used here.

  1.  Change this YouTube video id “KYniUCGPGLs” with your own in the HTML module and save:
    <div class=”youtube-player” data-id=”KYniUCGPGLs”></div>
  2. Remove the code highlighted below (it’s the link to this page).

 

Beaver Builder Fast Youtube Videos

The code for this module was taken from this article

See the Faster YouTube Videos template in action.

Example

Code

HTML 

<!--
This speeds-up page loads by only adding thumbnail image associated with a YouTube video. 
The other YouTube files are only loaded when the images is clicked. Change the data-id below for your video: 
-->

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

CSS 

.youtube-player{
position: relative;
padding-bottom: 56.23%;
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: flex;
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: 0.4s all;
}
.youtube-player IMG:hover{
-webkit-filter: brightness(75%);
}
.youtube-player .play{
position: absolute;
cursor: pointer;
z-index: 1;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -34px;
}
.youtube-player .play:after{
content: "▶";  /* unicode used for the play button*/ 
font-size: 25px;
color: #fff;
background-color:rgba(0,0,0,0.4);
padding: 8px 22px;
border-radius: 12px;
}

.youtube-player .play:hover:after{
background-color: red;  /* Color of the play button on hover over*/ 
}

JavaScript 

  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);
    }

Discounts On These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction" 25% off

--------------------------------------------------------------

 

Get the Beaver Junction Plugins here

Get it now

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment