Cara Membuat Video Youtube Responsive di Blogger




Cara  Membuat Video Youtube Responsive di Blogger
Cara  Membuat Video Youtube Responsive di Blogger

 Pada malam ini saya akan menjelaskan tentanga cara untuk memebuat video yautube responsive di blog. ,untuk memebuatnya sangat mudah sekali khusus nya bagi anda yang paham coding dan suka otak atik kode di template blog. tetapi bagi anda yang baru masih mengenal blogger, tidak masalah jangan pusing, karena saya akan menjelaskannya dengan detail dan mudah bisa di pahami oleh anda.

Saya tidak menjelaskan panjang lebar tentang, jadi Untuk  anda yang sudah tidak sabar lagi untuk memebuat nya, anda bisa mengikuti ;angkah-langkah di bawah ini.

#Membuat Video Youtube Responsive

1. Seperti biasa Pertama silahkan anda masuk ke Blogger atau Klik Disini 

2. Kemudian  anda klik Theme => Edit HTML 

3. Anda salin kode d bawah ini, dan di [astekan diatas kode </style> atau ]]></b:skin> ( cara cepat pencarian tekan CTRL + F)

.videoyoutube{text-align:center;background:linear-gradient(to bottom,#fefefe 0%,#d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow:1px 30px 30px -26px #818181}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

4. Kode padding-bottom:56.25% pada CSS di atas bisa anda rubahsilahkan anda salin kode HTML di bawah ini untuk memunculkan videonya di postingan:
5. Anda letakan kode di bawah ini ke dalam Html postingan atau Html/ Java Script.


<div class="videoyoutube">

<div class="video-responsive">

<div class="video-youtube loader" data-src="//www.youtube.com/embed/https://youtu.be/yFz3NiVkU6I"></div>

    </div>

    </div>
6. Note ganti URL https://youtu.be/yFz3NiVkU6I embed videonya dengan URL embed video milik anda atau video yang anda sukai

7. Selanjutnya anda Copas kode javascript iframe loader video Youtube di bawah ini dan Paste di atas kode kode </body>


<script type='text/javascript'>

//<![CDATA[

setTimeout(function(){

$('.video-youtube').each(function(){

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

//]]>

</script>

8. Jika blog anda blum ada terdapat kode  jquery library, maka biasa anda copy kode jquery library di bawah ini 
9. Paste kan kode dibawah ini di atas kode </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

10. klik Save Template. dan lihat hasilnya.

Oh ya hampir lupa, jika sudah selesai anda mengikuti langkah-langkah tutorial di atas, sedikit tambahan kode untuk kode CSs.

 1. Anda copy kode di bawah ini dan di pastekan di atas kode ]]></b:skin>

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}

2. Dan Terakhir anda klik Save Template.

Cara mengambil Script Embed Video Youtube

Untuk anda yang belum bisa mendapatkan iframe embed youtube , maka anda bisa  melihat gambar berikut :


Demikian lah penjelasan saya pada malam ini, semoga bisa bermanfaat untuk anda, selamat mencoba, jika ada yang kurang jelas bisa anda tanyakan pada tombol komentar dibawah ini. salam blogger.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect