Cara Memasang Video Youtube Responsive Dengan Tampilan Menarik 2017

Cara Memasang Video Youtube Responsive Dengan Tampilan Menarik

2 Comments

Monday, September 26, 2016

ELANGEE - Cara Memasang Video Youtube Responsive Dengan Tampilan Menarik. Semuanya pasti tahu pengguna mobile semakin hari semakin banyak. Maka dari itu Google menyarankan web/blog dibuat menjadi mobile friendly. Ada saatnya di dalam postingan kita ingin menampilkan video dari youtube. Maka dari itu, di postingan kali ini saya akan membagikan caranya.

Video youtube responsive style 1 :

1. Kamu dapat memasukan script dibawah ini kedalam CSS templage 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 metode HTML (bukan compose) untuk menampilkannya di 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 kalian (lihat di URL video youtube)

Video youtube responsive style 2 :

 

1. Kamu dapat memasukan script dibawah ini kedalam CSS templage 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8daVoVvz5OcmUt0wwv7w1Kyeuwd245L33C5pkCVAmEQMYygT_9qj6ZXhkhiQx6svPOX8tHfa_KpfwdxCJ61AUz-LLNo_8zjbXl9eQRdouEshAelEUYqEBx9hznT6Ipjg340xp03Zq8FQ/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -moz-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8daVoVvz5OcmUt0wwv7w1Kyeuwd245L33C5pkCVAmEQMYygT_9qj6ZXhkhiQx6svPOX8tHfa_KpfwdxCJ61AUz-LLNo_8zjbXl9eQRdouEshAelEUYqEBx9hznT6Ipjg340xp03Zq8FQ/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -o-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8daVoVvz5OcmUt0wwv7w1Kyeuwd245L33C5pkCVAmEQMYygT_9qj6ZXhkhiQx6svPOX8tHfa_KpfwdxCJ61AUz-LLNo_8zjbXl9eQRdouEshAelEUYqEBx9hznT6Ipjg340xp03Zq8FQ/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8daVoVvz5OcmUt0wwv7w1Kyeuwd245L33C5pkCVAmEQMYygT_9qj6ZXhkhiQx6svPOX8tHfa_KpfwdxCJ61AUz-LLNo_8zjbXl9eQRdouEshAelEUYqEBx9hznT6Ipjg340xp03Zq8FQ/s1600/macbook+laptop+frame.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 metode HTML (bukan compose) untuk menampilkannya di 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 merah diatas) dengan video milik kalian (lihat di URL video youtube)

Video youtube responsive standart :

1. Kamu dapat memasukan script dibawah ini kedalam CSS templage blog (template >> tata letak >> edit HTML >> letakan sebelum atau diatas </head>) atau bisa juga dalam postingan tapi dengan mode HTML (bukan compose)
<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>
2. Untuk menampilkan videonya masukan kode dibawah ini dalam metode HTML (bukan compose) untuk menampilkannya di dalam postingan.
<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>
3. Ganti kode/link/id embed video youtube (kode berwarna merah diatas) dengan video milik kalian (lihat di URL video youtube)

Terimakasih sudah membaca sampai akhir. Selamat mencoba :) Baca juga : Template Blogger SEO Optimized