Cara Anyar Memasang Video Youtube Responsive pada Blog Kamu

Cara Anyar Membuat and Memasang Video Youtube Responsive plus Valid html5 pada Blog Kamu - Gimana sih cara untuk memasukan / upload video dari youtube agar menjadi responsive ? , meskipun itu kelihatanya mudah , tapi pada kenyataanya masih ada blogger newbie yang belom tahu , termasuk saya , saya aja baru tahu kali ini bahwa video youtube itu dapat di ubah jadi responsive . setelah cari sana sini di simbah

  Dengan bikin dan modifikasi video youtube yang awalnya gak responsive jadi responsive ternyata cukup mudah bangeets , kita perlu menambahkan pengaturan di css mengubah iframe , video dan embed dengan width 100% , karena ukuran persenlah inti dari responsive

  Terus apa donk manfaat membuat video responsive ?  kenapa ya kita kok repot - repot and ribet banget mengubah video yt jadi responsive segala wkwkwk :v , nah di era responsive ini , kita jangan mau ketinggalan brow untuk mengubah segala di blog kita jadi responsive , mulai dari template sampai isi - isinya [ video and gambar ] karena skrang ini banyak visitor yang datang dari handphone atau smartphone , biar nanti blog kita dapat di akes dengan baik di segala macam ukuran layar

Memasang Video Youtube Jadi Responsive , Valid and SEO

Seperti yang kita tahu bahwa iframe itu tak baik untuk seo , kalau kita masang video youtube cuma ngambil script iframenya doank , tanpa di modifikasi sama sekali , meskipun itu simple and mudah sekali tapi mau blog anda kurang seo ? . nah supaya lebih joss , ini dia tutornya
Pertama silahkan sobat masuk ke Menu template => Edit HTML , kemudian pasang css ini diatas kode </style>

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

Untuk kode padding-bottom:56.25% pada CSS .video-responsive silahkan simak penjelasannya dari sumbernya pada link di bawah postingan ini. Kemudian silahkan gunakan kode HTML di bawah ini untuk memunculkan videonya di postingan:

<div class="videoyoutube">

<div class="video-responsive">

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

    </div>

    </div>

Silahkan ganti URL embed videonya dengan URL embed video yang Anda ingin tampilkan.

Kemudian simpan kode javascript iframe loader video Youtube di bawah ini DI ATAS 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>

Dan jangan lupa blog Anda sudah dilengkapi dengan jquery library seperti di bawah ini (berapa pun versinya)

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

Selesai....

Cara mengambil Script Embed Video Youtube

Nah bagi anda yang belom bisa mendapatkan iframe embed youtube , anda dapat mempelajarinya dengan melihat gambar berikut :

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.

Ditulis oleh Mas Yadi pada tanggal

Tweet