Memasang video YouTube Responsive dengan tampilan yang Menarik

Halo gan kali ini gua akan bagikan tutorial lagi untuk kamu semua, baiklah simak baik baik!

✔ Video YouTube Responsive Style 1

DEMO

Untuk memasangnya kamu bisa masuk ke Blogger >> Template >> Edit HTML, Lalu salin kode dibawah tepat diatas atau dibawah kode </head> atau kamu bisa menyalinnya ke dalam mode HTML

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

Jika kamu ingin menyalinnya ke postingan atau dalam mode HTML (Bukan Compose) Kamu Bisa Menyalin Kode dibawah ini

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

✔ Video YouTube Responsive Style 2

DEMO

Masuk ke blogger kamu Pilih Template >> Edit HTML Salin kode dinawah ini tepat diatas atau dibawah kode </head>

<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/AVvXsEgrU2kdIdcanc7yYobPExocPsUYzFVRL6QQG3JSj5GK-hJ61E_HYMZ6xXzXfWm6wT2f3Qm8CAkwFYmETX9vIebbU5xt7w04Ex0nVAkQlDk1DJoSlv_l2GEUTqDF5RffuOWjhvoWmCLe4gc/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -moz-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrU2kdIdcanc7yYobPExocPsUYzFVRL6QQG3JSj5GK-hJ61E_HYMZ6xXzXfWm6wT2f3Qm8CAkwFYmETX9vIebbU5xt7w04Ex0nVAkQlDk1DJoSlv_l2GEUTqDF5RffuOWjhvoWmCLe4gc/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; -o-border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrU2kdIdcanc7yYobPExocPsUYzFVRL6QQG3JSj5GK-hJ61E_HYMZ6xXzXfWm6wT2f3Qm8CAkwFYmETX9vIebbU5xt7w04Ex0nVAkQlDk1DJoSlv_l2GEUTqDF5RffuOWjhvoWmCLe4gc/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch; border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrU2kdIdcanc7yYobPExocPsUYzFVRL6QQG3JSj5GK-hJ61E_HYMZ6xXzXfWm6wT2f3Qm8CAkwFYmETX9vIebbU5xt7w04Ex0nVAkQlDk1DJoSlv_l2GEUTqDF5RffuOWjhvoWmCLe4gc/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>

Kamu juga bisa menyalinnya ke postingan HTML (Bukan Compose)

<div class="seocips-tbn-fow">
<div class="seocips-wb-mac">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kode-YouTube?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

✔  Video YouTube Responsive Standart

Buka akun blogger kamu Pilih Template >> Edit HTML
Lalu salin kode dibawah ini tepat diatas atau dibawah kode </head>

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

Kamu juga bisa menyalinnya di postingan dalam mode HTML (Bukan Compose) 

<div class="seocips-vdo">
<div class="seocips-vdowp bottomshadows">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kode-YouTube" frameborder="0" allowfullscreen></iframe> </div>
</div>

Selesai

NOTE: GANTI TULISAN YANG BERWARNA BIRU MENJADI KODE YOUTUBE KAMU

Jangan lupa untuk berlangganan lewat email agar kamu tahu jika postingan ini update 

 Achlesy Man adalah seseorang yang hobby nge post & Gonta Ganti Platform Blogger Karena Senangnya, Dia sampai Lupa Waktu

Tulis Email kamu dibawah:


Dibuat Oleh ALLGAMES ENTALSEWU V2

Diposkan Oleh Achlesy Man

Tweet