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.

Related Posts

13 komentar:

  1. Berguna untuk kegunaan pada masa hadapan.

    BalasHapus
  2. Terima kasih infonya Mas Dj. Inikah kode yang dikunci itu? Atau yang lain?

    BalasHapus
  3. Aku pengen kayk gini nih, cuma kok berat banget, dr themanya udh berat ngeload mas, hehe
    nice tips mas.

    BalasHapus
  4. aku masih belum pede tampilin youtube mas :D

    BalasHapus
  5. Terima kasih buat ilmunya Mas, bisa coba-coba ntar.

    BalasHapus
  6. Oohh begitu toh caranya..
    Dulu pernah coba tampilin youtube saya Di blog...Tapi karena sepi dan kurang berbobot jadi akun youtube jarang saya gunakan.😰😰😭😭

    BalasHapus
  7. Youtube aku masih bayi bener subscribernya hahahaha :D Iya ya bagus juga kalau dipasang di blog. Tapi kayaknya ga berani setting sendiri wkwkwkwk :D

    BalasHapus
  8. duh masih bingung nih yang penting punya channel dulu. Mau tanya Mas, biar youtube aku bisa diterjemahkan berbagai bahasa setinganya bagaimana trims. maaf baru belajar

    BalasHapus
    Balasan
    1. Harus dibuat ke bahasa ingris tittle dan judulnya. disana ada toolsnya.

      Hapus
  9. Wah makasih banyak info nya bermanfaat sekali.
    Siapa tahu nanti bisa aku terapkan kalau udah punya channel youtube.

    BalasHapus

 
Back To Top