Cara Agar Video Diblog Sesuai Dilayar Hp - Mas Atan Way Kanan

Cara Agar Video Diblog Sesuai Dilayar Hp

Cara Agar Video Diblog Sesuai Dilayar Hp - berbagi artikel lagi tentang tutorial blog bagi anda yang masih awan / newbie sama seperti saya, monggo belajar bersama disini saling berbagi pengetahuan dan pengalaman anda. ini adalah lanjutan dari tutorial sebelumnya yaitu tentang cara menyisipkan video youtube kedalam postingan blog.

Agar Video di blog Tampil Responsive di HP 


Nah kali ini saya akan share tips seo blogger, yaitu bagaimana agar video tampil responsive ? Bagi anda yang memasang atau menambahkan video youtube di blog, namun saat blog anda diakses melalui HP video tersebut tidak tampil responsive melainkan tampil penuh melebihi layar HP, sehingga tidak dapat ditonton oleh pengunjung dengan jelas. Dan kemungkinan juga dapat memperlambat loading blog anda saat di akses melalui HP.

Permasalahannya yaitu di saat anda menambahkan video di blog anda hanya memasang embed code / url video youtube tanpa menambahkan kode script tambahan. Nah untuk mengatasi hal tersebut maka anda harus membuat video youtube tersebut agar tampil full responsive saat dibuka melalui HP.

Lalu bagaimana caranya agar video youtube yang kita pasang di blog agar bisa tampil full responsive di HP. Caranya cukup mudah sekali, anda cukup menambahkan kode script disertai embed code video youtube yang akan dipasang di blog anda. Untuk lebih jelasnya, silahkan simak tutorial Agar Video di blog Tampil Responsive di HP berikut ini.





Agar Video di blog Tampil Responsive di HP

                                                                          Agar Video di blog Tampil Responsive di HP


Caranya yaitu:


Video Youtube Agar Full Responsive di Blog, yaitu untuk mengakali embed video youtube agar menjadi responsive hanya dengan CSS

1. Pertama Login blogger.com terlebih dahulu.


2. Pilih Template, kemudian klik sesuaikan



Agar Video di blog Tampil Responsive di HP 

3. Jika sudah terbuka tampilannya seperti ini :


Silahkan anda pilih sesuaikan lebar, atau jika template anda tidak mendukung klik tingkat lanjut, intinya ada disini hanya menambahkan kode css kedalam blog.

Agar Video di blog Tampil Responsive di HP 
 

4. Selanjutnya Silahkan anda copy dan paste Code CSS di bawah ini :




/* 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}}





5. Jikas sudah maka akan seperti ini :



Agar Video di blog Tampil Responsive di HP 
 
 
Jika tampilan masih kurang sesuai, anda bisa atur kembali CSS max-height dalam media query.

6. Lalu klik terapkan ke blog untuk menyimpan perubahan


Agar Video di blog Tampil Responsive di HP
                                Cara Agar Video Diblog Sesuai Dilayar Hp

7. Selesai. silahkan anda cek pakai hp untuk melihat berhasil atau tidaknya.


Selamat mencoba.

Berlangganan update artikel terbaru via email:

Artikel Terkait

Artikel Terkait

Artikel Terkait

Artikel Terkait

close