src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/> Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube) - teachertekno.com

Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube)

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)
Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube)

Namun sayang, ternyata menyematkan video di blog itu tidak semudah yg dibayangkan. Dulu aku pikir wajib upload video ke Blog, padahal kita hanya perlu menggunakan fitur HTML seperti iframe atau pun pribadi embed link video Youtube. Dari beberapa artikel yg aku lihat pada website lain, hanya menggunakan fitur tadi yang ternyata hasilnya malah kacau, tidak responsive. Ada yang berantakan & nir mampu ditampilkan karena kasus autoplay dan embed yang tidak dijelaskan.

Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube)

Lantaran itu, aku akan menyebarkan cara memasang video Youtube di blog responsive dan cara agar autoplay dan anti gagal.

1. Masuk ke template blog engkau & edit HTML

2. Copy kode CSS embed link youtube pada bawah ini.

/* Embed Link Youtube */

.Youtube,.Youtube_boxmargin:0 auto;width:100%

.Youtube-resposiveposition:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0

.Youtube imgwidth:100%;height:auto;margin-top:-9.35%;z-index:1

.Youtube iframeposition:absolute;top:0;left:0;width:100%;height:100%;z-index:3

.Youtube-resposive:aftercontent:"";cursor:pointer;margin:auto;width:80px;height:80px;background-image:url("data:image/svg xml;charset=utf8,<svg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.W3.Org/2000/svg' xmlns:xlink='http://www.W3.Org/1999/xlink'><g><path style='fill:#000000' 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.Lima,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 dua.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 dua.16,14.93C2.09,14.13 2.06,13.44 dua.06,12.84L2,12C2,9.81 dua.16,8.2 dua.44,7.17C2.69,6.27 tiga.27,lima.69 4.17,lima.44C4.64,5.31 5.5,lima.22 6.82,lima.16C8.12,5.09 9.31,lima.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,lima.69 21.31,6.27 21.56,7.17Z'></pathdangt;</gdangt;</svgdangt;");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:afterbackground-image:url("data:image/svg xml;charset=utf8,<svg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.W3.Org/2000/svg' xmlns:xlink='http://www.W3.Org/1999/xlink'><gdangt;<path style='fill:#D50000' 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.Lima,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.Dua,18.84 4.17,18.56C3.27,18.31 dua.69,17.73 dua.44,16.83C2.31,16.36 dua.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 dua.06,12.84L2,12C2,9.81 2.16,8.Dua dua.44,7.17C2.69,6.27 tiga.27,5.69 4.17,5.44C4.64,lima.31 5.5,lima.22 6.82,5.16C8.12,lima.09 9.31,5.06 10.41,5.06L12,5C16.19,lima 18.8,lima.16 19.83,lima.44C20.73,lima.69 21.31,6.27 21.56,7.17Z'></path></g></svg>");

.Youtube-resposive:beforecontent:"";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 engkau lihat. Itu hanya kode icon SVG yang memang kelihatannya ribet & sulit.

Tiga. Pastekan di template sempurna di atas kode CSS lainnya. Caranya mudah, cukup tekan CTRL F & cari kode /*

4. Save template

5. Membuat postingan di blog (Entri Baru)

6. Copy dan paste kode pada bawah ini sempurna di hidangan 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://3.bp.blogspot.com/-skx31tLIe70/XCJIGj_VXLI/AAAAAAAAE2s/GKHi6qRSXRYSZ-68Lmjtkn7iG767eiF_ACPcBGAYYCw/s320/aplikasi%2Bdownload%2Bvideo%2Byoutube.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://3.bp.blogspot.com/-skx31tLIe70/XCJIGj_VXLI/AAAAAAAAE2s/GKHi6qRSXRYSZ-68Lmjtkn7iG767eiF_ACPcBGAYYCw/s320/aplikasi%2Bdownload%2Bvideo%2Byoutube.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.

Lihat jugaBesar Penghasilan Youtuber Vs Blogger

Demikianlah cara memasang video Youtube pada blog responsive atau lebih populer disebut embed link Youtube. Semoga bermanfaat!

0 Response to "Cara Memasang Video Youtube Pada Blog Responsive (Embed Link Youtube)"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel