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 seobers 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. |
| 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>2. Untuk menampilkan videonya masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.
.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>
<div class="seocips-tbn-frm">3. Ganti kode/link/id/ embed video youtube (kode berwarna merah diatas) dengan video milik kamu (lihat di url video youtube).
<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>
Video Youtube Responsive Style 2
Ini adalah frame dari mcbook kosong dengan bingkai gambar, sialahkan digunakan jika kamu anggap menarik. |
| 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>2. Untuk menampilkan videonya masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.
.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/AVvXsEhHBeP_cozWyzhIMixRuA31EZfrcnCSl0TdSGRyBUbvZ6ThMKL4oX4a0KlJ435nFIF5DPxyoIMNXfTyABmWv1uiiouOeLGRv2zbVvjUbZpiTNSjGraXlpaJlkmJ1u0OngDb1GuQxq14yaQ/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -moz-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBeP_cozWyzhIMixRuA31EZfrcnCSl0TdSGRyBUbvZ6ThMKL4oX4a0KlJ435nFIF5DPxyoIMNXfTyABmWv1uiiouOeLGRv2zbVvjUbZpiTNSjGraXlpaJlkmJ1u0OngDb1GuQxq14yaQ/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -o-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBeP_cozWyzhIMixRuA31EZfrcnCSl0TdSGRyBUbvZ6ThMKL4oX4a0KlJ435nFIF5DPxyoIMNXfTyABmWv1uiiouOeLGRv2zbVvjUbZpiTNSjGraXlpaJlkmJ1u0OngDb1GuQxq14yaQ/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBeP_cozWyzhIMixRuA31EZfrcnCSl0TdSGRyBUbvZ6ThMKL4oX4a0KlJ435nFIF5DPxyoIMNXfTyABmWv1uiiouOeLGRv2zbVvjUbZpiTNSjGraXlpaJlkmJ1u0OngDb1GuQxq14yaQ/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>
<div class="seocips-tbn-fow">3. Ganti kode/link/id/ embed video youtube (kode berwarna biru diatas) dengan video milik kamu (lihat di url video youtube).
<div class="seocips-wb-mac">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BTAe-autS6c?rel=0&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
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">Sama seperti kedua style diatas, ganti kode berwarna merah diatas di kode/link video youtube milik kamu.
<div class="seocips-vdowp bottomshadows">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU" frameborder="0" allowfullscreen></iframe> </div>
</div>
Terimakasih dan selamat mencoba.
Post Comment