Cara Memasang Video Youtube di Blog - Halo sobat portalblogspot.net, dalam kesempatan kali ini saya akan membahas bagaimana cara memasang video youtube di blog, sebagai pelengkap setiap artikel yang telah anda buat. Blog yang banyak membahas tentang tutorial, musik, dan lain sebagainya dapat didukung dengan video. Sehingga untuk dapat memasang video disetiap postingan tidak perlu lagi aploud yang membutuhkan waktu dan memakan paket internet yang mahal.
Untuk dapat memasang video youtube anda dapat menggunakan cara yang mudah yaitu dengan mengambil kode script yang telah disediakan. Namun terkadang beberapa blogger belum tahu apakah video yang telah terpasang akan dapat terlihat dengan baik di smartphone atau responsive.
Baca: Cara Memasang Youtube Subcribe Button di Blog.
Lalu bagaimana cara memasang video youtube di blog menjadi responsive dan tidak mengurangi SEO blog itu sendiri. Berikut langkah-langkahnya.
1. Buka akun Blogger > Template > Edit HTML kemudian tambahakan kode css dibawah ini sebelum "]]></b:skin> atau </style>"
4. Kemudian jika anda ingin menambahkan video di postingan jangan lupa memasang kode dibawah ini.
Sampai disini anda telah berhasil memasukkan dan memasang video youtube di blog, tetapi yang menjadi pertanyaan adalah apakah video tersebut sudah responsive atau belum? Jawabanya adalah sudah dan video anda dapat terlihat dengan baik di desktop maupun smartphone.
UPDATE!!!
Bagi anda yang telah menggunakan template blog AMP HTML untuk dapat memasang video youtube sangat mudah dan cepat. Perlu anda ketahui bahwa dengan menggunakan template AMP HTML sangat simple berbeda apabila menggunakan HTML5 harus memasang Javascript, CSS, dan masih banyak yang lain.
Ingin tahu lebih lanjut bagaimana cara memasang video youtube di template AMP HTML? Ikuti langkah-langkahnya dibawah ini.
Langkah pertama yang harus dilakukan adalah dengan memasang kode AMP Iframe dibawah kode "</head> atau </head><!--<head/>-->" jika sudah ada abaikan saja dan lanjut ketahap selanjutnya.
Langkah selanjutnya adalah dengan memasang kode seperti dibawah ini, kode AMP Youtube ini dapat anda tempatkan sesuai keinginan anda dan pastinya dalam postingan / artikel blog.
Itulah cara memasang video youtube di blog AMP HTML dan selain blog amp html. Semoga dengan adanya tutorial ini dapat menambah pengetahuan anda dalam dunia modifikasi blog, dan dapat melengkapi setiap postingan blog anda dengan video.
Untuk dapat memasang video youtube anda dapat menggunakan cara yang mudah yaitu dengan mengambil kode script yang telah disediakan. Namun terkadang beberapa blogger belum tahu apakah video yang telah terpasang akan dapat terlihat dengan baik di smartphone atau responsive.
Baca: Cara Memasang Youtube Subcribe Button di Blog.Lalu bagaimana cara memasang video youtube di blog menjadi responsive dan tidak mengurangi SEO blog itu sendiri. Berikut langkah-langkahnya.
Cara Memasang Video Youtube di Blog
1. Buka akun Blogger > Template > Edit HTML kemudian tambahakan kode css dibawah ini sebelum "]]></b:skin> atau </style>"
/* Youtube Responsive */2. Jangan lupa tambahkan kode javascript dibawah ini sebelum "</body>"
.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}
<script type='text/javascript'>3. Simpan Template.
//<![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>
4. Kemudian jika anda ingin menambahkan video di postingan jangan lupa memasang kode dibawah ini.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="LINK-EMBED-VIDEO-YOUTUBE-DI-SINI">
</div>
</div>
</div>
Sampai disini anda telah berhasil memasukkan dan memasang video youtube di blog, tetapi yang menjadi pertanyaan adalah apakah video tersebut sudah responsive atau belum? Jawabanya adalah sudah dan video anda dapat terlihat dengan baik di desktop maupun smartphone.
UPDATE!!!
Cara Memasang Video Youtube di Blog AMP HTML
Bagi anda yang telah menggunakan template blog AMP HTML untuk dapat memasang video youtube sangat mudah dan cepat. Perlu anda ketahui bahwa dengan menggunakan template AMP HTML sangat simple berbeda apabila menggunakan HTML5 harus memasang Javascript, CSS, dan masih banyak yang lain.
Ingin tahu lebih lanjut bagaimana cara memasang video youtube di template AMP HTML? Ikuti langkah-langkahnya dibawah ini.
Langkah pertama yang harus dilakukan adalah dengan memasang kode AMP Iframe dibawah kode "</head> atau </head><!--<head/>-->" jika sudah ada abaikan saja dan lanjut ketahap selanjutnya.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>
Langkah selanjutnya adalah dengan memasang kode seperti dibawah ini, kode AMP Youtube ini dapat anda tempatkan sesuai keinginan anda dan pastinya dalam postingan / artikel blog.
<amp-iframe
frameborder="0"
height="200"
src="https://www.youtube.com/embed/xxxxxx"
width="300"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
layout="responsive"
</amp-iframe>
Itulah cara memasang video youtube di blog AMP HTML dan selain blog amp html. Semoga dengan adanya tutorial ini dapat menambah pengetahuan anda dalam dunia modifikasi blog, dan dapat melengkapi setiap postingan blog anda dengan video.
