Modifikasi Video Youtube Di Blog Menjadi Di Dalam Laptop | Bahas Tutorial

Bahastutorial.com - Kesempatan kali ini kita akan memodifikasi video youtube yang ada di dalam blogger dengan  perpaduan HTML Dan Css. Disini apabila kita memasukan video youtube ke dalam blogger maka video youtube kita menjadi di dalam sebuah laptop.Tutorial ini tidak memberatkan loading blogger dan sangat responsive.

Cara Pemasangan :

1 Masuk Ke Blogger
2 Pilih Template/Tema
3 Kemudian Ke Edit Html
4 Simpan Kode CSS Tepat Di Atas Kode ]]></b:skin>
5 Simpan Kode HTML Di Dalam Postingan Di Mode HTML Bukan Di Compose

CSS

 
 
  /*CSS By www.bahastutorial.com*/
.tb_outer_wrap {
    width: 100%;
    max-width: 650px;
    margin: 15px auto;
}
.tb_video_wrap_macbook {
    position: relative;
    padding-bottom: 43%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    -webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGtdx_9M962m7SOO_54oRtqmqqey8EI1ig1m1Ri32OmbXmGqWbvy_8PLSBTR-sYV1YbOr0xQw6HQs0ZUgKwfRkPnXwHO94n6WTfWUBZTJuc9jE72Tx_GreBj3DMpGIMmZF_jQdTr9ixLU/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGtdx_9M962m7SOO_54oRtqmqqey8EI1ig1m1Ri32OmbXmGqWbvy_8PLSBTR-sYV1YbOr0xQw6HQs0ZUgKwfRkPnXwHO94n6WTfWUBZTJuc9jE72Tx_GreBj3DMpGIMmZF_jQdTr9ixLU/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGtdx_9M962m7SOO_54oRtqmqqey8EI1ig1m1Ri32OmbXmGqWbvy_8PLSBTR-sYV1YbOr0xQw6HQs0ZUgKwfRkPnXwHO94n6WTfWUBZTJuc9jE72Tx_GreBj3DMpGIMmZF_jQdTr9ixLU/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGtdx_9M962m7SOO_54oRtqmqqey8EI1ig1m1Ri32OmbXmGqWbvy_8PLSBTR-sYV1YbOr0xQw6HQs0ZUgKwfRkPnXwHO94n6WTfWUBZTJuc9jE72Tx_GreBj3DMpGIMmZF_jQdTr9ixLU/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;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
    border-width: 20px 62px 40px 62px;
}
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
    border: none !important;
}
}

HTML

 
 
  <!-- bahatutorial -->
<div class="tb_outer_wrap">
<div class="tb_video_wrap_macbook">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/SmGIq__4yKM?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" width="560"></iframe>
</div> </div>

KODE HTML(Double Click Untuk Copy Semua Kode Secara Langsung)


KODE CSS (Double Click Untuk Copy Semua Kode Secara Langsung)

Edit Beberapa Bagian Yaitu :

1 SmGIq__4yKM = Ganti Dengan Kode Iframe Video Youtube kalian



Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..

kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..

Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com

★ ★ ★ ★ ★



