The simplest and easiest way to embed Youtube videos on your website is to use the already-provided code under each video. Simple copying and pasting.
After a little styling, this method works rather well. As shown in the screenshot to the left from my portfolio website, the videos look quite good, and they are playable right from whatever page they are embedded on. All done rather easily.
After a little styling, this method works rather well. As shown in the screenshot to the left from my portfolio website, the videos look quite good, and they are playable right from whatever page they are embedded on. All done rather easily.
However, while these videos may look fine on the site, a clear problem emerges when you load the page: it takes forever. And, as shown below, this only gets worse with slower connections.
| Connection Type | Load Speed |
|---|---|
| Decent WIFI | 13.47s |
| 4G | 14.17s |
| Good 3G | 19.73s |
| Regular 3G | 44.86s (ouch) |
Mobile site viewers also face another damper to load times: their device’s processor. Phones nowadays are pretty fast, however they cannot handle nearly as much information as a computer can in a timely manner. Sites with many traditionally-embedded videos are a phone’s worst nightmare. In my experience loading my portfolio site on my iPhone 6, the browser froze a couple times, to the point where when I clicked to go to another page to escape the loading madness, the phone would not respond for a while. However, I had no issue loading other pages with no embedded videos. So, the videos must’ve been the cause of the slowdown. So I started doing some research to see if there’s a more efficient way.
I stumbled upon this helpful site, and decided to see how much better this method truly is. After trial and error, I found how to effectively use this method:
First, copy and paste your video’s ID, shown at the end of every YouTube video’s URL.
Paste the ID into where it says “YOUR-ID.” In order to be able to re-size each video easily (shown in CSS on bottom/right), I wrapped the “youtube-player” div inside of another div, “vid.”
<div class="vid">
<div class="youtube-player" data-id="YOUR-ID"></div>
</div>
.vid {
width: 50%;
float: left;
}
Next, place the following Javascript wherever you’d like in your HTML body. This is what significantly reduces the page load time; the Javascript finds each video on your page, and puts its thumbnail in place of the actual video. So, your page only loads the thumbnail (a compressed image) instead of loading the actual video(s). Only when you click on the video does it load, which saves your browser an incredible amount of work, a.k.a. load time.
<script>
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>
WAIT! You’re not done yet! While your video should work now, it probably doesn’t look very good. Let’s style it. Place this into your CSS file:
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
width: 100%;
background: #000;
}
.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;
}
THAT’S IT! After all that hard work of copying and pasting, your embedded videos should now look good, and work well! All while saving A TON of loading time.
Don’t believe me? Check out the comparison below:
Each of these sites has the exact same set of 20 videos, with the one on the left using the traditional embedding method, and the one on the right using the more efficient embedding method. See the significant differences in loading times below. Pay special attention to the Regular 3G load speeds:
| Connection Type | Load Speed (Trad. Method) | Load Speed (Efficient. Method) |
|---|---|---|
| Decent WIFI | 10.41s | .561s |
| 4G | 10.33s | 1.41s |
| Good 3G | 18.01s | 2.77s |
| Regular 3G | 33.06s (ouch) | 5.63s (wow) |
Still don’t believe me? Click on either site image above to test out the sites for yourself.
Also notice how, when your viewport is smaller, such as on a phone, the more efficent method scales much better than the standard method due to its responsive design:
