Kadal Pelangi: Cara Memasang Video Responsif Youtube di Website

Yooo Ketemu lagi bersama Dany Tri Kusuma disini gan sist, kali ini mau ngeshare lagi satu persatu videoku tentang satu playlistku yang aku kasih nama acaranya adalah PNN alias Podcast Ngalor Ngidul. Hehehe Pokoknya di PNN ini aku akan bahas tips and trik gan sist tentang apapun yang aku tau. Mulai dari Tips keluar negeri, mendapatkan uang di internet, reksadana, tips youtube dll. Wokee Nah ini adalah PNN atau Podcast Ngalor Ngidulku yang ke tiga puluh satu. Kali ini akan aku share video berjudul Cara Memasang Video Responsif Youtube di Website - PNN Eps 31. Kali ini aku mau ngeshare Cara Memasang Video Responsif Youtube Di Blog Kita. Kita tau kan kalau Youtube adalah salah satu platform atau website penyedia layanan video terbesar didunia. Di Youtube kita bisa menonton, dan mengupload video yang kita sukai. bahkan kita bisa menjadi Youtuber atau orang yang profesional upload video di youtube dan mendapatkan uang dari adsense atau bahkan endorse dari iklan yang ingin mengiklankan brandnya di akun youtube kita. Sudah banyak kok Youtuber youtuber sukses diluaran sana gan sist di berbagai belahan dunia bahkan Indonesia sendiri.

Aku akan ngasih tau tipsnya Memasang Video Responsif Youtube Di Blog Kita agar saat di lihat di handphone video yang kita upload akan menjadi resonsif yaitu sesuai ukuran handphone kita. Seperti ini kalau dilihat di Hape

Jadi video youtubenya akan pas di Hape, dulu sebelum pakai teknik ini, video youtubeku saat aku buka di hape begitu besar gan sist sesuai i frame, sekarang dengan metode ini jadi pas, mantaap deh. Nah kalau ukuran video kalau di buka di PC seperti gambar dibawah, Pas juga ntaap

Nah gimana sih caranya gan sist, langsung aja ya di simak Cara Memasang Video Responsif Youtube Di Blog Kita :

1. Buka Blogger anda dan pilih Tema lalu Edit HTML gan sist, lalu tambahkan kode dibawah ini seblum kode ini gan sist ]]></b:skin> atau </style> . Dibawah kodenya ini copy ntar paste aja

Kode :

/* Youtube Responsive */

.videoyoutube{text-align:center;margin:auto;width:100%;}

.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}

.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2. Lalu copy paste kode dibawah ini gan sist sebelum </body>

Kode :

//<![CDATA[

// Youtube Responsive

setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);

//]]>

</script>

3. Lalu Simpan Aja Gan sist

4. Lalu saat mau memasukkan video jangan lupa menggunakan kode ini gan sist :

Kode :

</div>

Examplenya gini gan sist cara mengambil Embed Video di youtube kita.

Nah kode embed ini gan -- https://www.youtube.com/embed/OvFG1fhtrS8 -- Copy paste di TARUH-LINK-EMBED-VIDEO-DI-SINI biar bisa responsif video youtube kita gan sist, ngopynya di HTML ya, bukan di compose, Kalau bingung akan aku buatkan PNN (Podcast Ngalor Ngidul Episode ke 31 tentang Cara Memasang Video Responsif Youtube Di Blog Kita) So stay tuned aja di Youtubenya mas dani Kalau bingung tonton PNN Podcast Ngalor Ngidul Episode ke 31 tentang Cara Memasang Video Responsif Youtube Di Blog Kita So stay tuned aja di Youtubenya mas dani.

Yaaa pokoknya gitu ajalah gan videonya, hehe Maaf yaa newbie soalnya, Masih katrok dalam hal memberikan tips and trik. Thanks sudah mampir di youtubeku ini. Semoga kalian yang nonton video ini atau baca artikel ini sukses selalu dan sehat terus atau minimal bisa menambah info dan wawasan buat kalian guys.. Byee

--------------------------------------------------------------------------------------------

KALAU MAU BERTEMAN DI SOSMED :

Youtube : https://www.youtube.com/danytrikusuma

Twitter : https://twitter.com/danytrikusuma

Instagram : http://ift.tt/2rjkBpc

Facebook : http://ift.tt/2rSjKJ1

Ask.Fm : http://ift.tt/2rjk8TL

Websiteku : http://ift.tt/2rSJ3uA

-----------------------------------------------------------------------------------------------

My Future Brand Sanjuu.ID

Website : http://www.sanjuu.id

Facebook : http://ift.tt/2rSrQl7