How to Make Embedded Videos Youtube Responsive in Blogger - cara membuat embed video youtube responsive di blog
Pastinya kita semua tahu bahwa pengguna mobile saat ini semakin banyak. Web/blog kita menjadi lebih sering di akses pengguna menggunakan mobile sehingga saat ini di tuntut web/blog harus mobile friendly dan responsive bahkan Googlepun menyarankan web/blog dibuat menjadi mobile friendly.

Ada saatnya kita harus memasukan video kedalam postingan dan seringkali adalah video yang di ambil dari Youtube, nah agar videonya dapat di tonton dengan nyaman oleh pengguna mobile maka sebaiknya dibuat menjadi responsive, oleh karena itu seocips saat ini akan membagikan cara memasang video Youtube responsive sekaligus dengan tambahan bingkai untuk membuatnya terlihat lebih menarik.

Video Youtube Responsive Style 1

Gaya yang pertama cukup keren dengan efek bayangan dibawahnya, video title info yang muncul dibagian atas dan video terkait yang muncul diakhir video telah di nonaktifkan sehingga lebih ringan dan loading video youtube yang lebih cepat dari sebelumnya.
Video Youtube Responsive Style 1
Style 1

1. Kamu dapat memasukan kode dibawah ini kedalam CSS template blog (template >> tata letak >> Edit HTML >> letakan sebelum atau diatas </head>) atau bisa juga dalam postingan tapi dengan mode HTML (bukan Compose).
<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 masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.
<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 merah diatas) dengan video milik kamu (lihat di url video youtube).


Video Youtube Responsive Style 2

Ini adalah frame dari mcbook kosong dengan bingkai gambar, sialahkan digunakan jika kamu anggap menarik.
Video Youtube Responsive Style 2
Style 2

1. Kamu dapat memasukan kode dibawah ini kedalam CSS template blog (template >> tata letak >> Edit HTML >> letakan sebelum atau diatas </head>) atau bisa juga dalam postingan tapi dengan mode HTML (bukan Compose).
<style>
.seocips-tbn-fow { width:100%; max-width:650px; margin:120px auto; }
.seocips-wb-mac { position:relative; padding-bottom:43%; padding-top:0; height:0; overflow:hidden; -webkit-border-image:url('http://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch; -moz-border-image:url('http://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch; -o-border-image:url('http://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch; border-image:url('http://4.bp.blogspot.com/-9SlILeH9ikA/VboLX1JtwsI/AAAAAAAABUM/M5vmGSMXzBc/s1600/macbook%2Blaptop%2Bframe.png') 50 233 112 228 stretch stretch; border-color:rgba(0,0,0,0); border-width:27px 76px 55px 76px; border-style:inset; }
.seocips-wb-mac iframe,.seocips-wb-mac object,.seocips-wb-mac embed { position:absolute; top:0; width:100%; height:100%; background-color:#ddd; }
@media (max-width:500px) {
    .seocips-wb-mac { border-width:20px 62px 40px 62px; } @media all and (max-width:400px) { .seocips-wb-mac{border:none !important; }
}
</style>
2. Untuk menampilkan videonya masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.
<div class="seocips-tbn-fow">
 <div class="seocips-wb-mac">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BTAe-autS6c?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
 </div>
</div>
3. Ganti kode/link/id/ embed video youtube (kode berwarna biru diatas) dengan video milik kamu (lihat di url video youtube).



Video Youtube Responsive Standart

Yang ini adalah versi standartnya berbeda gaya/style sebelumnya karena ini yang sederhana, mungkin cocok untuk kamu yang suka dengan kesederhanaan.

CSS

<style>
.seocips-vdo { width:100%; max-width:560px; margin:15px auto; }
.seocips-vdowp { position:relative; padding-bottom:56%; padding-top:0; height:0; background-color:#000 !important; }
.seocips-vdowp iframe,.seocips-vdowp object,.seocips-vdowp embed { position:absolute; top:0; width:100%; height:100%; }
</style>

HTML

<div class="seocips-vdo">
 <div class="seocips-vdowp bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU" frameborder="0" allowfullscreen></iframe> </div>
</div>
Sama seperti kedua style diatas, ganti kode berwarna merah diatas di kode/link video youtube milik kamu.

Terimakasih dan selamat mencoba.
0 Komentar untuk "Memasang Video Youtube Responsive Dengan Tampilan Yang Menarik"