Cara Membuat Video Youtube Responsive di Blogger Cara Membuat Video Youtube Responsive di Blogger - mizipediacom mizipediacom: Cara Membuat Video Youtube Responsive di Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Video Youtube Responsive di Blogger

Thursday, 25 May 2017



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.
Baca Juga