27 August 2022

Cara Embed Youtube Agar Responsive dan Cepat di Postingan Blog

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Cara Embed Youtube Agar Responsive dan Cepat

EMBED YOUTUBE dalam postingan bisasanya dilakukan oleh para blogger yang memiliki video di channel youtube dan ingin menampilkan di postingan blognya. Dalam membuat sebuah artikel di postingan blog memang tidak melulu menampilkan tulisan saja. Di postingan itu kita bisa menampilkan gambar supaya maksud dan tujuan dari artikel yang dibuat menjadi jelas. Dan gambar mengartikan segalanya. Kurang lebih seperti itu.

Selain gambar yang terpampang di postingan, format video juga termasuk salah satu dari pelengkap tulisan supaya maksud dan tujuan dari tulisan bisa terlihat lebih jelas lagi. Karena dari video itu semua pergerakan bisa terlihat dengan lebih jelas. Video lebih bagus dari gambar. Mungkin itu salah satu persepsinya. Sehingga tidak sedikit video ditampilkan dengan beragam variasi.

Video saat ini sedang menjadi trend di kalangan blogger mungkin juga di kalangan penggiat video atau kita sering menyebutnya Youtuber. Sehingga di postingan sering terdapat beberapa video pendukung. Semisal artikelnya tentang Cara Membuat Video Youtube maka selain tutorial berupa tulisan, mereka menyisipkan video yang diembed dari Channel Youtubenya. Dan video itu biasanya sudah didesain dengan apik dengan beberapa software editing video yang banyak tersebar di dunia maya. Desain yang kreatif dan beragam membuat video itu semakin kreatif.



Terlebih lagi dengan video, segala pergerakan yang dilakukan dapat terekam keseluruhannya. Sehingga dengan video itulah, segalanya menjadi jelas. Tapi apakah dengan tambahan video, blog menjadi berat? Tentu saja iya, saya katakan berat. Karena untuk mengupload 1 video saja dari embed video yang tampil di postingan dibutuhkan bandwith dari kuota internet yang tidak sedikit. Bahkan bisa dikatakan, streaming video menyebabkan boros kuota. Tapi karena kebutuhan pendukung tetap saja video itu mesti ditampilkan.

Pertanyaan yang bagus diatas itu. Dan jawabannya adalah iya menjadi berat loadingnya. Karena upload video ke halaman web yang file nya besar membutuhkan daya bandwidth yang besar pula. Sehingga waktu yang diperlukan pun lama mulai dari klik awal hingga video keseluruhan tampil dengan buffering mulai start.

Sekarang kita akan mulai mempraktekkan supaya embed video yang dipasang di postingan menjadi ringan dan responsive.

Caranya bisa diikuti dibawah :

Cara Embed Youtube Agar Responsive dan Cepat


1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Klik Sesuaikan : Edit HTML
4. Cari kode ]]></b:skin>
Tempelkan kode dibawah diatas kode ]]></b:skin>
.youtube-container{display:block;margin:20px auto;width:100%;max-width:600px}.youtube-player{padding-bottom:56.25%;overflow:hidden;position:relative;width:100%;height:100%;cursor:hand;cursor:pointer;display:block}img.youtube-thumb{bottom:0;display:block!important;left:0;margin:auto!important;max-width:100%!important;width:100%!important;position:absolute;right:0;top:0;height:auto!important}div.play-button{height:100px;width:100px;left:50%;top:50%;margin-left:-50px;margin-top:-50px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9VEJvps0hujVnco2yEW_P1P96-IVbbNzcoUYerdI5qwGcTzvxQ1a2vm_TcvLBRqlZaCJuVMBuzFNqxta2wYbqkDB7DStLjzaDr_z6VV6028-tk-JhoQnS_ILrOaIxiz1BfhymoaW59Nbn38tv1ufQzJLfroeqH3t4i_JHaSwA6cFybjhf534iHwL-/s1600/IKON.png) no-repeat}#youtube-iframe{width:100%;height:100%;position:absolute;top:0;left:0}


5. Kemudian cari kode </body>
Letakkan kode dibawah ini persis diatas kode </body>
<script src='https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/ALIFAYOUTUBERINGAN.js' type='text/javascript'/>


6. Cara diatas masih belum cukup, karena kita mesti menampilkan di postingan. Maka dari itu masih membutuhkan kode pemanggil supaya kode itu keluar dengan sempurna. Caranya adalah :

Taruh kode dibawah dalam postingan :

<div class="youtube-container"><div class="youtube-player" data-id="pB4B-IRARA0"></div>


Catatan : tulisan data-id="pB4B-IRARA0" -- yakni untuk pB4B-IRARA0 diganti dengan data-id youtube kamu yang mau diembed.




Sekian yang dapat saya sampaikan di postingan kali ini. Semoga artikel Cara Embed Youtube Agar Responsive dan Cepat bisa membantu kalian yang sedang mengedit blog untuk disisipi video kalian yang sudah berada di Youtube. Dan video kalian tetap tampil sempurna dan ringan ketika ditampilkan di berbagai perangkat. Terima kasih yang sudah mampir dan membaca artikelnya. Wassalam.

Bagikan ke teman-teman kamu
Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Embed Youtube Agar Responsive dan Cepat di Postingan Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon