Tips Cara Memasang Video Youtube Responsive di Blog – Siboro Blog

Tips Cara Memasang Video Youtube Responsive di Blog – Siboro Blog - Biasanya yang sering dilakukan untuk mengupload Video Youtube ke dalam postingan adalah sebagai berikut :

1.    Pertama anda harus mengambil kode embed dulu di youtube seperti gambar dibawah ini

1.    Perhatikan di bawah video. Silakan klik Bagikan atau Share, kemudian klik Sematkan atau Embed.

2.    Setelah itu silakan copy kode embed yang tampak disitu ke dalam notepad. Lihat gambar atas yang berlatar biru.

3.    <iframe width="560" height="315"

     src="https://www.youtube.com/embed/OH3UF3I_KXo?"frameborder="0" allowfullscreen> </iframe>

Catatan : Note: 560 dan 315 adalah tinggi dan lebar video. Sesuaikan dengan lebar halaman posting anda.

  

Cara Memasang Kode Embed di Blog Anda :

1.   Bila Ingin di pasang di sidebar

Buka Layout/Tata Letak, lalu pilih Gadget HTML, kemudian pastekan kode embed yang anda simpan di notepad tadi di situ, dan klik  Simpan. Selanjutnya seret gadget tersebut ke tempat yang anda kehendaki di blog.

2.   Bila Ingin di pasang di postingan

Buka halaman entry baru, lalu klik HTML di sudut kiri atas. Kemudian pastekan kode embed yang anda simpan di notepad tadi di bagian yang anda kehendaki. Misalnya di bagian atas postingan, tengah, atau bawah. Selanjutnya klik publish. Baca Juga : ( Tips Cara Mencerahkan Wajah Kusam Dengan Photoshop - Siboro Blog ).

Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog, Karena adanya elemen iframe dan tampilannya pun belum responsive jika ukuran layar diperkecil. Agar tampilan video anda dapat responsive jika dilihat dari versi web maupun seluler terapkan cara berikut  :

1.   Buka Blogger > Template > Edit HTML > Tambahkan kode di bavvah ini sebeium ]]> </b:skin> atau </style>

CSS

/* Youtube Responsive */

.videoyoutube{text-align:center;margin:auto;width:100%;}

.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}

.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2.   Tambahkan kode ini sebelum </body>

Jquery

     <script type='text/javascript'>

//<![CDATA[

// Youtube Responsive

setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);

//]]>

</script>

3.   Simpan Template

4.   Selanjutnya untuk menambahkan video pada postingan, gunakan kode dibawah ini :

HTML

<div class="videoyoutube">

<div class="video-responsive">

<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">

</div>

</div>

</div>

Lihat hasil nya dalam versi website dan selular setelah kita terapkan metode tersebut :

Demikian artikel, Tips Cara Memasang Video Youtube Responsive di Blog – Siboro Blog , Apabila menurut Anda artikel ini bermanfaat bagi orang lain, Mohon untuk di Share, Terima Kasih.