Skip to main content

Memasang Video Responsive di Blog Hanya dengan CSS

Mengambil embed video langsung dari Youtube dan dipasang apa adanya ke blog (blogspot) merupakan cara termudah untuk menampilkan video tersebut di blog.

Tapi sayangnya pemasangan embed video secara langsung ini menyebabkan tampilan secara mobile akan terpotong, karena iframe video tersebut ternyata tidak mendukung desain yang responsive alias mobile friendly. Untuk membuktikan hal ini, Anda bisa mencobanya sendiri.

Kebanyakan panduan yang diberikan untuk membuat video menjadi responsive menggunakan gabungan script dari javascript, CSS dan html.

Untuk blogger yang kurang begitu paham dengan script, tentu saja ini cukup merepotkan.
Meskipun ada juga yang hanya memakai script CS, namun ternyata tetap harus melakukan perubahan pada kode htmlnya, sehingga mau tidak mau jika embed video sudah terpasang, harus diedit satu persatu.

Selain itu, pemakain kode javascript yang terlalu banyak sebaiknya dihindarkan (ini menurut para Master SEO), salah satunya karena bisa menambah berat beban loading blog.


Jika hanya beberapa video yang ada di blog mungkin tidak masalah, tapi jika banyak tentu saja sangat menyita waktu alias merepotkan.

cara mudah memasang video youtube responsive
Nah, di artikel kali ini Saya akan memberikan tips pemasangan embed video youtube (yang menggunakan Iframe tentunya) menjadi responsive hanya dengan memasang beberapa baris script CSS dengan tanpa melakukan editing lagi pada setiap kode embed yang telah terpasang.

# Langkah pertama masuk ke dashboard blogspot Anda dan langsung menuju ke HTML template.
# Langkah kedua cari kode berikut : ]]></b:skin>
# Langkah Ketiga Letakkan kode berikut tepat di bawah kode di atas.
<style>
/* iframe video CSS Only */
.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}}
</style>
# Langkah Terakhir Kemudian simpan Template Anda.

Coba periksa lagi video yang terpasang di posting blog Anda melalui layar HP, seharusnya jika pemasangan benar, hasilnya, video tersebut akan mobile friendly. Semoga bermanfaat

SUMBER SCRIPT

Comments

Popular Posts

Cara Menambahkan Shopping Cart di Template Blogspot

Bagaimana cara menambahkan shopping cart ke template blogspot? Seringkali Tips SEO Terbaik menerima pertanyaan ini. Nah tulisan kali ini akan mencoba memberikan panduan mengenai cara memasang shopping cart ke template blogspot. Shopping cart yang dipasang adalah dengan checkout via paypal. Panduan memasang atau menambahkan shopping cart ke template blogspot ini sebenarnya pernah ditulis oleh Kangismet di blognya blog.kangismet.com.  Script shopping cart sendiri diambilkan dari scriptnya simplecart buatan thewoojogroup.com . Pemakaian SimpleCart.js ini sangat cocok untuk platform blogspot yang tidak menggunakan php. Pemasangannya sebenarnya cukup sederhana. Sebelum membaca lebih lanjut panduan menambahkan shopping cart di template blogspot ini ada baiknya anda melihat dulu live demonya DISINI Berikut panduannya. Memasang Script Shopping Cart di Template Langkah 1. Pastikan template anda sudah memasang  frame works jquery di template anda, jika belum simpan script berik

5 template blogspot toko online terbaik dan gratis

Template blogspot untuk toko online yang terbaik dan gratis sudah banyak bertebaran di internet. Namun kali ini tips SEO terbaik akan membagikan informasi khusus untuk template blogger toko online terbaik sekaligus SEO namun tetap gratis khusus untuk pengunjung blog ini. Pilihan untuk template blogspot toko online banyak sekali, bahkan untuk template blogspot toko online yang gratis pun banyak yang memiliki kualitas seperti halnya template premium alias template berbayar. Informasi mengenai template toko online blogspot gratis ini sengaja dibagikan di blog ini untuk memudahkan anda menentukan pilihan mengenai template yang paling cocok dan sesuai untuk memajang produk-produk anda. Baca tips SEO dan alternatif template toko online terbaru lainnya berikut: Cara submit sitemap terbaru di google webmaster Gratis 9 Template Toko Online Blogspot Full Responsive Semua template yang diinformasikan di sini ada yang memiliki fitur shopping cart dan ada yang tidak sehingga bisa menyesua

Optimasi Search Engine (SEO) Toko Online Blogspot

Ada beberapa pertanyaan menarik yang pernah atau bahkan sering mampir ke Saya mengenai SEO, khususnya untuk para pengguna blogspot yang memanfaatkannya sebagai toko online. Apakah toko online dengan blogspot bisa berhasil? Bagaimana SEO blogspot untuk toko Online? Apakah SEO Blogspot Toko Online berbeda dengan SEO Toko Online lainnya? dan masih banyak lagi pertanyaan yang serupa dengan 3 pertanyaan di atas, namun poinnya tetap sama yaitu SEO Toko Online Blogspot. Baiklah, kita mulai pembahasannya. Saya akan langsung ke poin-poinnya yang penting saja. Agar tidak melebar kemana-mana. Platform blogspot bisa dibilang memiliki struktur yang sederhana, sehingga cukup mudah bagi para pemula dan terbukti banyak sekali yang memanfaatkan platform ini untuk berbagai tujuan. Meski blogspot awalnya memang hanya bertujuan buat nge-Blog. Bahkan teknik SEO pada blogspot pun sebenarnya juga cukup sederhana. Anda bisa mempelajari dari berbagai sumber, yang memiliki poin yang sama, karen