Assalamualaikum sahabat >💗>Modetorial<💗<

Halo teman-teman apakarnya?
Kali ini saya mau berbagi lagi nih Tentang "Cara Memasang Vidio Youtube di Blog agar Responsive" ya sebenarnya memasukan Embet vidio itu sangat mudah sekali, tetapi jaman sekarang pengguna smart phone semakin banyak dan akhirnya vidio yang di pasang di blog hasilnya akan tetap besar ketika dibuka di smart phone. gak asik kan jika nonton videonya cuma separoh saja. ya itulah masalah saya pada awalnya, jadi setelah melakukan pencaria sana sini maka hasilnya sangat memuaskan. ya walaupun ada sedikit kelemahan yaitu sedikit memerlukan waktu loading untuk menampilkan ukuran vidionya, namun ini bukan masalah besar kok hanya perlu menunggu sedikit waktu saja.

Jadi bagaimana prosedurnya? baiklah langsung saja

1. Buka Bloger anda > Klik Template > Edit HTML
2. Tambahkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>
/* Youtube Responsive */
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.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}

3. Kemudian lanjut dengan menambah kode berikut ini sebelum kode </body>
<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>

4. Kemudian jangan lupa Klik Save ya...
5. Sekarang masukan kode berikut ini setiap kali memasukan video youtube di postingan kalian ya...
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="Ganti Tulisan ini dengan Embet Kode">
</div>
</div>
</div>

6. Ganti tulisan berwarna Merah dengan kode Embet Vidio youtube yang akan anda masukan. berikut caranya:
- Buka Vidio yang akan di masukan kedalam blog
- Klik Kanan pada vidio
- Klik pada " Salin Kode Semat "

7. Buka NotePad dan pastekan disana.
- Pastekan kedalam Notepad
- Perhatikan gambar yang di blok
- Copy kode smat tersebut kemudian pastekan kedalam skrip yang di atas sehingga hasilnya seperti dibawahnya.
8. Selesai sudah, tinggal kembali ke menu composite dan Publikasikan Postinganya.

Cukup mudah bukan?
Jangan Lupa Like Halaman Modetorial di Facebook ya agar tidak ketinggalan info yang bermanfaat dari kami.

MUDAH-MUDAHAN BERMANFAAT DAN BISA DI PRAKTEKAN
TERIMAKASIH

Tentang ModeTorial
Modetorial adalah website untuk belajar dan menghasilkan uang dari internet
 
Top