youtubeke dalam blog kita tercinta!
Sangat mudah untuk menanamkan video YouTube dengan metode
iframetetapi 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;
}
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("
cursor: pointer;
}
.youtube-player:hover .play {
background: url("
}
Gantikan link image background dengan gambar kreasi kalian masing-masing dengan resolusi 72px x 72px YQHsXMglC9A dengan ID VIDEO YouTube!
DONE.DEMO: codepen.io/beben-koben/full/xERyRO/
Resource by: www.labnol.org/internet/light-youtube-embeds/27941
kissui.scrollanim - css-locks - HTML-Sheets-of-Paper - docs2epub - emoji-css - ClipBoard - docpress - txt.wav - github-explorer - hakoniwa - lightgallery.js - web-quickeditor - city-generator
<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/* 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>
<div class="youtube-player" data-id="YQHsXMglC9A "></div> 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
