Cara Agar Video Youtube Tampil Responsive di Blog

21 views
Hello kawan selamat menikmati disiang hari bolong ini, Kali ini aku akan mengembangkan tips dan trik blog perihal bagaimana membuat biar video youtube mampu 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 mampu menampilkannya disini aku akan mengulas secara lengkap tutorial membuatnya denga simpel dan working, ada beberapa tahap pembuatannya yaitu mulai dari CSS, HTML dan Javascript. namun ini tidak menunjukkan efek berat pada blog.

Okelah pribadi saja berikut ini beberapa tahap pemasangannya simak secara detail ya alasannya ialah salah sedikit anda akan gagal memaksimalkan responsivenya.

Cara Agar Video Youtube Tampil Responsive di Blog

Cara Agar Video Youtube Tampil Responsive di Blog :

  • Pasang aba-aba berikut ini diatas aba-aba

.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 aba-aba 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 aba-aba embed youtube yang ingin anda tampilkan.
  • Kemudian silahkan anda copy aba-aba dibawah ini dan anda pastekan sempurna diatas aba-aba

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

Tags: #Tutorial Blogger