Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube)
"Cara memasang video Youtube pada blog responsive, kode CSS embed link youtube dan cara membuat video Youtube di blog autoplay"
4 min read
Cara Memasang Video Youtube Pada Blog (Embed Link Youtube) - Beberapa tahun yang lalu, saya masih ingat salah satu cara membuat artikel SEO friendly yang dijelaskan oleh beberapa pakar Blogger di dunia termasuk Indonesia dengan membuat artikel kaya konten. Dijelaskan kalau ternyata, konten artikel itu bukan hanya teks, tapi juga gambar, grafik termasuk video Youtube. |
| Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube) |
Namun sayang, ternyata menyematkan video di blog itu tidak semudah yang dibayangkan. Dulu saya pikir harus upload video ke Blog, padahal kita hanya perlu menggunakan fitur HTML seperti iframe atau pun langsung embed link video Youtube. Dari beberapa artikel yang saya lihat di website lain, hanya menggunakan fitur tersebut yang ternyata hasilnya malah kacau, tidak responsive. Ada yang berantakan dan tidak bisa ditampilkan karena masalah autoplay dan embed yang tidak dijelaskan.
Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube)
Karena itu, saya akan berbagi cara memasang video Youtube di blog responsive dan cara agar autoplay dan anti gagal.
1. Masuk ke template blog kamu dan edit HTML
2. Copy kode CSS embed link youtube di bawah ini.
/* Embed Link Youtube */
.youtube,.youtube_box{margin:0 auto;width:100%}
.youtube-resposive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0}
.youtube img{width:100%;height:auto;margin-top:-9.35%;z-index:1}
.youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}
.youtube-resposive:after{content:"";cursor:pointer;margin:auto;width:80px;height:80px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23000000' d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:center;-webkit-background-size:80px 80px;background-size:80px 80px;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:all .2s ease-out;z-index:2;display:inline-block!important}
.youtube-resposive:hover:after{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23D50000' d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");}
.youtube-resposive:before{content:"";cursor:pointer;margin:auto;width:20px;height:20px;background-color:#fff;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}
.youtube,.youtube_box{margin:0 auto;width:100%}
.youtube-resposive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0}
.youtube img{width:100%;height:auto;margin-top:-9.35%;z-index:1}
.youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}
.youtube-resposive:after{content:"";cursor:pointer;margin:auto;width:80px;height:80px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23000000' d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:center;-webkit-background-size:80px 80px;background-size:80px 80px;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:all .2s ease-out;z-index:2;display:inline-block!important}
.youtube-resposive:hover:after{background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23D50000' d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");}
.youtube-resposive:before{content:"";cursor:pointer;margin:auto;width:20px;height:20px;background-color:#fff;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}
Sebenarnya kode di atas tidak sepanjang yang kamu lihat. Itu hanya kode icon SVG yang memang kelihatannya ribet dan sulit.
3. Pastekan di template tepat di atas kode CSS lainnya. Caranya mudah, cukup tekan CTRL + F dan cari kode /*
4. Save template
5. Membuat postingan di blog (Entri Baru)
6. Copy dan paste kode di bawah ini tepat di menu HTML postingan blog (Bukan Compose)
<div class="youtube_box">
<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="youtube image" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8EtikHrSXj5hIBJlESf_60jtnkGKK4nQnDbJtc4_UEBo4ycnvou8SsNkHtxjtcVTTKZ_05xb-kZRgzuXLJ2J2iHH22PU7hjH2kqifSASKy2jtPsHw_m0b8CsIvG7fXZgPbEVn4yLi0u4/s320/aplikasi+download+video+youtube.jpg" height="281" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="500" />
<!--<iframe src="https://www.youtube.com/embed/pCLLOisDvwU?autoplay=1&autohide=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen="1"></iframe>-->
</div>
</div>
</div>
<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="youtube image" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8EtikHrSXj5hIBJlESf_60jtnkGKK4nQnDbJtc4_UEBo4ycnvou8SsNkHtxjtcVTTKZ_05xb-kZRgzuXLJ2J2iHH22PU7hjH2kqifSASKy2jtPsHw_m0b8CsIvG7fXZgPbEVn4yLi0u4/s320/aplikasi+download+video+youtube.jpg" height="281" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="500" />
<!--<iframe src="https://www.youtube.com/embed/pCLLOisDvwU?autoplay=1&autohide=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen="1"></iframe>-->
</div>
</div>
</div>
7. Cari video Youtube yang akan disematkan di dalam postingan blog dan copy linknya di address bar
Contoh link Youtube https://www.youtube.com/watch?v=pCLLOisDvwU&t=2s
8. Ubah kode pCLLOisDvwU dengan kode URL video Youtube yang akan kamu tampilkan di blog
Lihat bahwa pada tutorial di atas, kita hanya perlu mengganti gambar yang akan ditampilkan dan videonya.
Perhatikan pada kode video Youtube, saya tidak mengganti URL utama Youtube dan juga embed. Saya hanya mengganti kode khususnya saja.
9. Ubah kode berikut ini dengan tampilan Youtube sebelum diplay. Kodenya adalah url gambar yang sesuai dengan video agan. Saya biasanya menggunakan fitur screenshot kemudian mengupload gambar di postingan blog dan mengkopy URL-nya pada tampilan postingan HTML.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8EtikHrSXj5hIBJlESf_60jtnkGKK4nQnDbJtc4_UEBo4ycnvou8SsNkHtxjtcVTTKZ_05xb-kZRgzuXLJ2J2iHH22PU7hjH2kqifSASKy2jtPsHw_m0b8CsIvG7fXZgPbEVn4yLi0u4/s320/aplikasi+download+video+youtube.jpg
10. Pratinjau artikel sebelum dipublikasikan untuk melihat apakah video Youtube sudah berhasil tampil di blog.
11. Publikasikan artikel yang sudah diedit tanpa mengubah HTML jadi Compose. Ketika Anda mengubah itu, maka kode HTML Anda akan diterjemahkan yang membuat tag div susah diatur.
Berikut hasilnya embed link Youtube di blog responsive. Video di bawah ini adalah video Pak Ndul: Database Google
Itulah cara membuat video Youtube di blog autoplay dan responsive. (Saya lupa kode CSS tersebut di dapat di mana dulu. Ini adalah artikel bookmark beberapa bulan yang lalu).
Apakah pemilik video Youtube akan complain kalau kita nonton video Youtubenya di blog? Tentu tidak karena view pada channel Youtube-nya tetap dihitung dan iklannya pun tetap tampil meskipun diputar di blog kita. Selain itu, pengunjung bisa menonton di blog kita atau pun menontonnya fullscreen langsung di Youtube juga bisa.
Demikianlah cara memasang video Youtube pada blog responsive atau lebih populer disebut embed link Youtube. Semoga bermanfaat!