2 Cara Biar Video Youtube Tampil Responsive Di Artikel Blog
Video dan gambar merupakan konten yang paling menarik bagi pengguna internet, baik itu video hiburan, tutorial, vlog, gaming, dll. Hal ini sanggup kita manfaatkan sebagai salah satu trik untuk meningkatkan jumlah pengunjung di blog/web kita dengan menyertakan sebuah video pada artikel yang kita bagikan.
Di lansir dari Insert a video pada hidangan editor.
Baca juga : 4 Tahap Menggunakan Meta Keywords Manual Dan Otomatis Di Blogger
Pertanyaanya apakah tampilan video cukup menarik dan responsive di Pc/hp?, perlu di perhatikan kenyamanan juga penting semoga pembaca melihat video yang kita dengan terperinci baik untuk pengguna pc/laptop maupun hp dan tidak menciptakan loading page blog/web kita menjadi lamban. Untuk menciptakan video youtube tampil responsive di artikel blog, kalian sanggup menyimak panduan 3 Cara Agar Video Youtube Tampil Responsive di Artikel Blog.
1. Menggunakan Embed Video Online
✔ Kunjungi http://embedresponsively.com
✔ Paste link video youtube pada kafetaria yang telah di sediakan kemudian klik Embed.
✔ Scroll kebawah copy semua kode pada kafetaria Embed code.
✔ Langsung ke blogger buat artikel gres masuk mode HTML dan paste Embed code. Untuk melihat akhirnya silahkan klik pratinjau. Selesai!
Cara embed video youtube semoga responsive dengan memanfaatkan embed video online ini sangat mudah dan gampang kau tidak perlu menambahkan isyarat javascript atau css pada template blog/web. Dengan cara ini kau sanggup dengan gampang menciptakan video tampil lebih responsive. Selain video dari youtube kalian juga sanggup embed video dari aneka macam situs streaming lain menyerupai vimeo, dailiymotion dan masih banyak fitur lainya.
2. Menggunakan CSS
✔ Masuk ke blogspot.com
✔ Pilih hidangan Tema atau Template kemudian klik Edit HTML.
✔ Pada hidangan edit html klik ctrl+f di keyboard kau kemudian paste kode ]]></b:skin> atau </style>
✔ Copy dan paste kode CSS dibawah ini, dan letakan di atasnya.
/* CSS Video Responsive */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
✔ Terakhir tambahkan isyarat Jquery dibawah ini, dan letakan diatas </body>
<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>
//<![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>
✔ Untuk menampilkan video responsive di artikel blog/web, gunakan isyarat dibawah ini pada hidangan editor artikel kemudian pilih HTML.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="Letakan Link Embed Video Disini">
</div>
</div>
</div>
<div class="video-responsive">
<div class="video-youtube loader" data-src="Letakan Link Embed Video Disini">
</div>
</div>
</div>
✔ Ganti Letakan Link Embed Video Disini dengan link embed video yang kalian inginkan kemudian simpan.
Baca juga : Contoh Membuat Script Kotak Html Keren Pada Artikel Blog
Akhir Kata
Terima kasih telah berkunjung jangan lupa untuk share alasannya mengembangkan itu indah semoga sanggup saling membantu bagi sobat yang membutuhkan artikel ini, follow juga blog melalui email untuk terus mendapat update terbaru dari laman saya
