Cara memasang video Youtube responsive dengan bingkai di Blog

HaiSob 👋 apa kabar? semoga semuanya dalam keadaan baik 😁. Pada kesempatan ini saya akan membagikan tutorial cara memasang video Youtube responsive dengan bingkai di Blogspot. Tampilannya lumayan menarik gan

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 🅶oogle pun 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 saat ini saay akan membagikan cara memasang video 🆈outube 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.

Baca juga: Widget random post efek show hide di Blogspot

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>
.haisob-tbn-frm { width:100%; max-width:560px; margin:120px auto; }
.haisob-tbn-frm_inner { position:relative; padding-bottom:53%; height:0; background-color:#000 !important; border:15px solid #CACACA; }
.haisob-tbn-frm_inner iframe,.haisob-tbn-frm_inner object,.haisob-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) {
    .haisob-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="haisob-tbn-frm">
 <div class="haisob-tbn-frm_inner bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/pIMwhEflezE?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.

Baca juga: Memasang widget Random Post hanya judul tanpa gambar
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>
.haisob-tbn-fow { width:100%; max-width:650px; margin:120px auto; }
.haisob-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; }
.haisob-wb-mac iframe,.haisob-wb-mac object,.haisob-wb-mac embed { position:absolute; top:0; width:100%; height:100%; background-color:#ddd; }
@media (max-width:500px) {
    .haisob-wb-mac { border-width:20px 62px 40px 62px; } @media all and (max-width:400px) { .haisob-wb-mac{border:none !important; }
}
</style>
2. Untuk menampilkan videonya masukan kode dibawah ini dalam mode HTML (bukan Compose) untuk menampilkannya dalam postingan.

Baca juga: cara memasang Slider di Blogger
<div class="haisob-tbn-fow">
 <div class="haisob-wb-mac">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pIMwhEflezE?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 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.

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).

Baca juga: cara menambahkan efek bayangan ke template Blogger

CSS

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

HTML

<div class="haisob-vdo">
 <div class="haisob-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.
Join This Site