2 Cara Agar Video Youtube Tampil Responsive di Artikel Blog

oleh
2 Cara Agar 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 dapat 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 CNNindonesia 53% pengguna internet di indonesia menonton video di youtube sedangkan sisanya 57% menonton siaran televisi, ini membuktikan bahwa sebuah video dapat menarik banyak orang untuk melihatnya. Bila kalian hanya sekedar melampirkan sebuah video pada artikel cukup dengan mengambil embed video youtube terus copy dan paste di menu Insert a video pada menu 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 agar pembaca melihat video yang kita dengan jelas baik untuk pengguna pc/laptop maupun hp dan tidak membuat loading page blog/web kita menjadi lamban. Untuk membuat video youtube tampil responsive di artikel blog, kalian dapat 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 bar yang telah di sediakan lalu klik Embed.
 
2 Cara Agar Video Youtube Tampil Responsive di Artikel Blog
 
✔ Scroll kebawah copy semua kode pada bar Embed code.
2 Cara Agar Video Youtube Tampil Responsive di Artikel Blog
✔ Langsung ke blogger buat artikel baru masuk mode HTML dan paste Embed code. Untuk melihat hasilnya silahkan klik pratinjau. Selesai!
2 Cara Agar Video Youtube Tampil Responsive di Artikel Blog
Cara embed video youtube agar responsive dengan memanfaatkan embed video online ini sangat simpel dan mudah kamu tidak perlu menambahkan kode javascript atau css pada template blog/web. Dengan cara ini kamu bisa dengan mudah membuat video tampil lebih responsive. Selain video dari youtube kalian juga bisa embed video dari berbagai situs streaming lain seperti vimeo, dailiymotion dan masih banyak fitur lainya.

2. Menggunakan CSS

✔ Masuk ke blogspot.com
✔ Pilih menu Tema atau Template lalu klik Edit HTML.
✔ Pada menu edit html klik ctrl+f di keyboard kamu lalu 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}}

✔ Terakhir tambahkan kode 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>

✔ Untuk menampilkan video responsive di artikel blog/web, gunakan kode dibawah ini pada menu editor artikel lalu pilih HTML.

<div class=”videoyoutube”>
<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 lalu simpan.

Baca juga : Contoh Membuat Script Kotak Html Keren Pada Artikel Blog

Akhir Kata
Terima kasih telah berkunjung jangan lupa untuk share karena berbagi itu indah agar bisa saling membantu bagi teman yang membutuhkan artikel ini, follow juga blog melalui email untuk terus mendapatkan update terbaru dari laman saya

Share on:

Artikel Terkait

Tinggalkan komentar