Membuat Video YouTube Responsive di Sidebar, Tambah Kece!

Video YouTube Responsive di Sidebar

Sekarang itu era YouTube, lihat saja jika artis maupun mantan artis jika lagi ngumpul atau diwacancarai, pasti menyingung atau mempromosikan channel Youtubenya. Aduh, kalau ngomongin channel youtube, sebenarnya saya sangat malu. Youtuber kawakan tapi subscribernya masih cabe-cabean. Kalah sama yang kaleng-kaleng, tapi sungguh topnya luar biasa. Tapi tak apalah ya, yang namanya nasib itu emang berbeda-beda.

Dulu, jaringan internet masih 2G, menyiksa sekali. Belum lagi, komputer yang masih jadul. Benar-benar payah, terus kamera hape juga masih 2MP resulusinya. Itupun harganya sangat elit sekali. Sekarang, jangan ditanya lagi. Semua serba ok, dan top markotop. Hape yang super canggih, aplikasi android yang super kece pula. Jaringan akan memasuki 5G. Kurang apa coba? Dulu, saya unggah vido durasi dua menit saja, bisa memakan waktu berjam-jama. Bahkan sampai tertidur, giliran bangun apa yang terjadi? Komputernya rusak karena kepanasan. Ah dasar nasib apes!

Maka saya sering mengajak para blogger, buatlah channel youtube. Memang diakui, untuk monitisasi channel youtube sekarang sangat berat sekali. Jangankan seorang blogger, artis Marsanda yang seksi bodynya, dengan bibir yang begitu mengoda saja, merasa kesulitan. Tak perlu putus asa, terus berjuang. Paling tidak, nantinya video bisa menjadi bahan pelengkap cerita artikel. Sehingga tampak lebih hidup.

Lah dalah, kok jadi jauh begitu cerita pembukanya. Saya kan sebenarnya ingin membuat artikel tentang meletakan atau menaruh video Youtube di sidebar atau di widget blog. Pastinya video itu responsive. Enak dilihat dengan perangkat mobile.

Yang Pertama, pasang kode dibawah ini di HMTL/JavaSripts pada Tambahkan Gadget, Tata Letak
<div class="embed-box">
<iframe src="https://www.youtube.com/embed/Bo5KxtBEALk" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="0" frameborder="0"></iframe>
</div>
Atau
<div class="embed-box">
<object data="//www.youtube.com/embed/Bo5KxtBEALk" frameborder="0" allowfullscreen></object>
</div>

Pada intinya mah sampai, hanya yang kedua tidak menggunakan iframe. Yang berwarna merah ganti dengan kode embed video Anda.


Tahap Kedua pasang kode CSS dibawah ini pada tema blog diatas kode, ]]></b:skin>
/***** Video YT Sidebar *****/
#HTML7 {margin-bottom:7px ;padding:0;}
@media only screen and (max-width:768px){
#HTML7{width:100%;max-width:100%;margin-bottom:7px; padding:0;}}

.embed-box {
position: relative;
padding-bottom: 62.25%; /* ratio for youtube embed */
padding-top: 0px;
height: auto;
overflow: hidden;}
.embed-box iframe,
.embed-box object,
.embed-box embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

Kode yang berwarna biru sebenarnya kode tambahan, bisa dihapus, jika tidak berpengaruh pada jarak dengan widget dibawah atau diatasnya. HTML7, pastinya sudah pahamkan, ya itu nomor urut ID Widget. Ganti nomor sesuai dengan ID Widget Anda.


Dan yang paling sulit sebenarnya pada kode berwarna merah. Harus menyesuikan rasio dengan lebar widgetnya. Agar video tersebut tampil jernih tidak blur, dan video tersebut juga full lebar widget, tidak ada garis atau layar hitam dibelakangnya. Anda perlu mengganti berulang-ulang sampai benar-benar pas dan sesuai. Silakan kurangi maupun tambahkan. Misalkan menjadi 56.70%, atau...

Video YouTube Responsive di Sidebar

Jika hanya ingin menampilkan video Youtube di halam utama saja, pada Tema edit HMTL, tambahkan kode warna merah. Ingatkan HTML7 adalah nomor ID widget, pastinya sesuai dengan nomor ID Widget di blog Anda.

<b:widget cond='data:view.isHomepage' id='HTML7' locked='false' title='' type='HTML'>

Kelebihan dari video youtube sekarang adalah, videonya bisa diputar dengan cara picture-in picture. Saat ditekan tool tersebut, video akan bergeser dibawah halaman layar komputer. Sehingga saat layar komputer discrool, video tetap tampak. Unik bukan? Mirip video yang terpajang di portal papan atas. Yahuud deh!

Dengan memasang video ini juga sangat membantu untuk menambah subscriber atau viewer. Bagaimana, mudah sekali bukan? Hanya perlu ketelitian saja. Sekali lagi, tak perlu kwatir dengan daya loading. Teknologi jaringan internet maupun perangkatnya sudah mendukung. Bukan lagi era 2G. Jangan lupa subscribe channel youtube saya ya? Salam sukes selalu.

Berita Terkait

Tidak ada komentar:

Posting Komentar

 
Back To Top