Cara Agar Video Youtube Tampil Responsive di Blog

Cara Agar Video Youtube Tampil Responsive di Blog

Hello kawan selamat menikmati disiang hari bolong ini, Kali ini saya akan berbagi tips dan trik blog tentang bagaimana membuat agar video youtube bisa tampil responsive pada blog? Apa gunanya, tentunya akan membuat pengunjung blog semakin mudah dalam melihat info-info penting dari video youtube yang anda upload.

Nah masih penasaran dengan bagaimana bisa menampilkannya disini saya akan mengulas secara lengkap tutorial membuatnya denga simpel dan working, ada beberapa tahap pembuatannya yaitu mulai dari CSS, HTML dan Javascript. namun ini tidak memberikan efek berat pada blog.

Okelah langsung saja berikut ini beberapa tahap pemasangannya simak secara detail ya karena salah sedikit anda akan gagal memaksimalkan responsivenya.

Cara Agar Video Youtube Tampil Responsive di Blog :

• Pasang kode berikut ini diatas kode

.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}

• Silahkan anda pakai kode berikut ini untuk memasang dan memunculkan video responsive pada blog anda.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
    </div>
    </div>

• Warna merah silahkan anda ganti dengan kode embed youtube yang ingin anda tampilkan.
• Kemudian silahkan anda copy kode dibawah ini dan anda pastekan tepat diatas kode

<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);
//]]>

• Dan perlu anda ingat! Blog anda sudah dilengkapi kode jquery library berikut ini :

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

Itulah Cara Anyar Memasang Video Youtube Responsive pada Postingan Blog Kita , Oh iya sebagai LIVE DEMO-nya silahkan nikmati video Indah nevertari Gangsta - Lumpuhkan Ingatanku di bawah ini. Silahkan coba resize layar monitor Anda dengan menekan tombol CTRL + Scroll Atas / Bawah pada keyboard dan mouse Anda, atau coba test halaman ini dengan responsive tool. 

Cara Agar Video Youtube Tampil Responsive di Blog

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: