Add Embed YouTube Videos Responsive & Easy

Ada metode terbaru untuk menanamkan embed video youtube ke dalam blog kita tercinta!
Sangat mudah untuk menanamkan video YouTube dengan metode iframe tetapi kita akan terkejut dengan mengetahui berapa besar ukuran byte yang tertanam/terbawa video YouTube itu ked dalam halaman postingan. Browser harus mendownload file JavaScript tambahan untuk memutar video YouTube saja. File-file ini di download dan bahkan jika pengunjung tidak pernah memainkan video tertanam tidak hanya meningkatkan ukuran byte dari halaman web, tetapi browser harus membuat beberapa permintaan HTTP untuk memutar satu video. Hal ini meningkatkan waktu loading keseluruhan halaman sehingga mempengaruhi kecepatan loading halaman. Kelemahan lain dengan default kode embed YouTube adalah bahwa itu belum responsif.

Google+ menggunakan teknik baru untuk embedding video YouTube! Hanya menampilkan gambar thumbnail embeds dari video YouTube dan video akan di putar hanya bila kita mengklik gbr thumbnail tersebut. Segitu saja keterangannya yah, AA Koben akan berbagi tutorial dari master Amit Agarwal owner www.labnol.org mengenai "how to add a better method for embedding youtube videos" Keunggulan kalau kita memakai trik ini adalah, embed video sudah responsive dan ukuran byte yg di bawa sangatlah kecil :)

.youtube-player {
position: relative;
padding-bottom: 55%;
/* 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;
/* My option for preposition display thumbnail img */
top: -4.789em;
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%);
-moz-filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("IMAGE-TOMBOL-PLAY ABU-ABU 72px x 72px") no-repeat;
cursor: pointer;
}
.youtube-player:hover .play {
background: url("IMAGE-TOMBOL-PLAY MERAH 72px x 72px") no-repeat;
}

Gantikan link image background dengan gambar kreasi kalian masing-masing dengan resolusi 72px x 72px

<script>//<![CDATA[
/* 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>

Kalau sudah, penulisan ketika memosting gunakan syntax sbb

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

Gantikan kode YQHsXMglC9A dengan ID VIDEO YouTube!

DONE.

DEMO: codepen.io/beben-koben/full/xERyRO/
Resource by: www.labnol.org/internet/light-youtube-embeds/27941

Apabila sobat tetap kepengen memakai atribut iframes dalam penulisan embed video youtube namu tetap responsive, you can try this trick...Reframe.js, superembed.js

Bonus:
kissui.scrollanim - css-locks - HTML-Sheets-of-Paper - docs2epub - emoji-css - ClipBoard - docpress - txt.wav - github-explorer - hakoniwa - lightgallery.js - web-quickeditor - city-generator