Tutorial cara Membuat video Youtube jadi Responsive di tampilan blog Keren

DSOP GRATIS - hari tahun baru telah kita lewati dimana sat ini saya akan share cara membuat video youtube anda menjadi tamplian yang responsive. pastinya sudah tau bahwa pihak googel memang menyarankan untuk membuat desain blog anda bisa tampil bagus di PC maupun di Mobile. iyaa,, ngak,,, =D

Agar video di youtube bisa maksimal untuk di lihat di blog maka untuk saatnya anda duduk ambil buku, atau notepad Pc. Kopi kode di bawah ini ya.

Videa responsive gaya 1

1.  Simpan kode di bawah ini di atas kode </head>

<style>

.seocips-tbn-frm { width:100%; max-width:560px; margin:120px auto; }

.seocips-tbn-frm_inner { position:relative; padding-bottom:53%; height:0; background-color:#000 !important; border:15px solid #CACACA; }

.seocips-tbn-frm_inner iframe,.seocips-tbn-frm_inner object,.seocips-tbn-frm_inner embed { position:absolute; top:0; width:100%; height:100%; }

.bottomshadows { position:relative; }

.bottomshadows:before,.bottomshadows:after { z-index:-1; position:absolute; content:""; bottom:0; left:10px; width:50%; top:80%; max-width:300px; background:#777; -webkit-box-shadow:0 15px 10px #777; -moz-box-shadow:0 15px 10px #777; box-shadow:0 15px 10px #777; -webkit-transform:rotate(-4deg); -moz-transform:rotate(-4deg); -o-transform:rotate(-4deg); -ms-transform:rotate(-4deg); transform:rotate(-4deg); }

.bottomshadows:after { -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); -o-transform:rotate(4deg); -ms-transform:rotate(4deg); transform:rotate(4deg); right:10px; left:auto; }

@media all and (max-width:400px) {

    .seocips-tbn-frm_inner { border:7px solid #CACACA !important; } .bottomshadows:before,.bottomshadows:after { bottom:9px !important; }

}

</style> 

2. Untuk menampilkan videonya anda masuk ke tata letak kemudian tambah widget pilih Html dan masukkan kode di bawah ini.

<div class="seocips-tbn-frm">
 <div class="seocips-tbn-frm_inner bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/FkyVecQyEZs?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

3. Ganti kode/link/id/ embed video youtube (kode berwarna Biru diatas) dengan video milik anda.

Jika artikel ini membantu banget saya meminta tolong, tolong sebarin tutorial ini ke sahabat indonesia lainnya.

Baca Selengkapnya Panduan Download

" Terimah Kasih Atas Kunjungannya"

Semoga Tutorial Kali Ini Bermanfaat Bagi Anda