Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas Cara Memasang Video Youtube Responsive dalam Postingan Blog, Postingan ini masih berhubungan dengan Artikel Tutorial Blog.
Memasang video youtube responsive - Hai kawan, apa kabar kalian semua? Semoga kita semua senantiasa dalam perlindunganNya ya. Sebelumnya saya sudah membagikan tutorial mengenai cara memasang widget artikel terkait di bawah postingan artikel blog, Maka pada kesempatan kali ini saya akan memberikan tutorial dalam menautkan video youtube ke dalam postingan artikel di dalam blog agar tampilan video tidak terpotong apabila blog di buka melalui media smartphone/ seluler. Baiklah g usah kebanyakan basi-basi langsung saja ikuti langkah-langkah di bawah ini.
Note : Jika di blog sobat sudah terpasang jquery berapapun itu versinya silahkan lewati langkah no. 4 di atas dan silahkan lanjut ke langkah berikutnya.
6. Tambahkan Javascript berikut sebelum atau diatas kode </body>
7. Klik save
Note : Perhatikan kode //www.youtube.com/embed/eFa2iVws228 di atas. Silahkan ganti alamat url yang saya tandai merah diatas dengan alamat url video yang di dapat dari hasil embeded video yang akan anda tautkan kedalam postingan artikel. Selamat mencoba :)
Pada Artikel kali ini kita akan membahas Cara Memasang Video Youtube Responsive dalam Postingan Blog, Postingan ini masih berhubungan dengan Artikel Tutorial Blog.
Cara Memasang Video Youtube Responsive dalam Postingan Blog
Advertisement
Cara Terbaru Memasang Video Youtube Responsive
Note : Sebelum melakukan editing ada baiknya sobat membackup template sobat terlebih dahulu.
1. Silahkan Login ke akun blogger terlebih dahulu,
2. Klik Template � Edit HTML,
3. Cari Kode </head> Gunakan Ctrl+F untuk memudahkan mencari kode tersebut.
4. Jika sudah ketemu letakkan kode jquery di bawah ini tept di atas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Note : Jika di blog sobat sudah terpasang jquery berapapun itu versinya silahkan lewati langkah no. 4 di atas dan silahkan lanjut ke langkah berikutnya.
5. Letakan kode CSS script diatas kode ]]></b:skin> atau </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}
6. Tambahkan Javascript berikut sebelum atau diatas 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>
7. Klik save
8. Kemudian silahkan masukkan kode dibawah ini pada halaman postingan yang anda inginkan.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/eFa2iVws228"></div>
</div>
</div>
Note : Perhatikan kode //www.youtube.com/embed/eFa2iVws228 di atas. Silahkan ganti alamat url yang saya tandai merah diatas dengan alamat url video yang di dapat dari hasil embeded video yang akan anda tautkan kedalam postingan artikel. Selamat mencoba :)
EmoticonEmoticon