Senin, 05 Juni 2017

Cara Memasang Video Responsif Youtube Di Blog Kita

Yooo ketemu lagi dengan diriku gan sist, Dany Tri Kusuma Dalam sebuah artikel yang wonderfull.hehe 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.
Nah kali ini 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 :
<script type='text/javascript'>
//<![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 class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="TARUH-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</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 


Mungkin sekian dulu cuuy artikel dari aku, semoga bermanfaat yaa... Tunggu videoku upload besok yaa atau gak hari rabu atau paling lama kamis upload. Kalau ada pertanyaan koment aja gan sist. wokeeehh

Related Posts

Cara Memasang Video Responsif Youtube Di Blog Kita
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.