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.
15 Komen Cara Anyar Memasang Video Youtube Responsive pada Blog Kamu
koq gak bisa gan !!!! padahal sudah ngikutin tutor di atas plek
Dapat ilmu baru nih. Tapi kalau pasang video youtube diblog apakah mempengaruhi kecepatan loading blognya om ?
bisa kok mas , coba di ulang kembali dengan cermat
sebenarnya ini sudah lama mas hehheeh , kalau masalah itu , ya cukup menambah beban blog
ia mas, blognya jadi tambah rada berat
jquery library itu gimana maksudnya...??? Kalau belum ada, gimana nambahinnya?
mas yadi,, kamu the best bangeeet.. hahaha, ajarai aku ngeblog. coba tengok blok ku itu sudah good apa belum,
trimakasih sangat membantu :)
Gmn ko' masih blm bisa. Q menggunakan cara yg itu
Terimakasih banyak mas. tapi kalau kode cssnya saya taro di posting jadi portable, tidak kenapa napa kan...
sepertinya hasrus dipraktekin nih mas makasih mas
ga sukses mas hehehe tetep aja
mas kalo style nya banayk di copy sebelah mana
Sangat bermanfaat....
Sukses Makasih Mas Yadi buat trik youtube ke blognya
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish