![[4 Tipe] Cara Memasang Video Youtube Di Postingan Blogger / Website](https://3.bp.blogspot.com/-fxMYpfVhrug/XmWfEiuWDwI/AAAAAAAAAYw/R3KqfPHe4zMD6DHOhXLWjQuo1E2bMJc1wCLcBGAsYHQ/w920-h400-p-k-no-nu/thumbnail.jpg)
[4 Tipe] Cara Memasang Video Youtube Di Postingan Blogger / Website
Cara Memasang Video Youtube Di Postingan Blogger / Website
Memasang video youtube kedalam website mungkin sudah menjadi kebutuhan bagi para blogger agar mempermudah pembaca lebih memahami isi dari postingan.
Pasang video youtube ada beberapa cara, dan salah satunya menggunakan kode embed itu sendiri, tetapi kita bisa sedikit mengubah gara iframe embed youtube agar terlihat lebih menarik, so lets get started.
Pertama copy dan paste code dibawah ke editor html tepat dibawah <body>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
Masuk ke Tema >> Edit HTML >> Klik apapun yang berada didalah editor >> CTRL+F >> ketik <body >> dan Paste tepat dibawahnya.
Kemudian cari video youtube yang ingin dipasang.
Putar video youtube dan klik Bagikan >> Embed, copy kode tersedia.
Saatnya Styling
1. Rata Tengah
Tambahkan kode berikut diantara kode iframe.
Diatas:
<div class="w3-center">
Dibawah:
</div>
Sebelum
iframe width="560" height="315" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Sesudah
<div class="w3-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Hasil
2. 2 Video Sejajar
Tambahkan kode berikut:
<div class="w3-row">
<div class="w3-half w3-center">
<iframe ----
</div>
<div class="w3-half w3-center">
<iframe----
</div>
</div>
Contoh:
<div class="w3-row">
<div class="w3-half w3-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="w3-half w3-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
Dan ubah width="560" height="315" menjadi width="500" height="280"
Hasil:
3. Multiple Video Embed
Sama dengan nomor 2, hanya saja anda cuma menambahkan
<div class="w3-row"> diawal dan </div> diakhir.
Dan juga <div class="w3-half w3-center"> di awal dan </div> diakhir iframe.
dan mengganti width="560" height="315" menjadi width="500" height="280"
Contoh:
<div class="w3-row"> <!--Awalan class w3-row-->
<!--Ini Video 1-->
<div class="w3-half w3-center">
<iframe width="500" height="280" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Ini Video 2-->
<div class="w3-half w3-center">
<iframe width="500" height="280" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Ini Video 3-->
<div class="w3-half w3-center">
<iframe width="500" height="280" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Ini Video 4-->
<div class="w3-half w3-center">
<iframe width="500" height="280" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Ini Video 5-->
<div class="w3-half w3-center">
<iframe width="500" height="280" src="https://www.youtube.com/embed/hhNhdg4cAGw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div> <!--Akhiran class w3-row-->
Hasil:
4. Full Video
Dan disini adalah Full Width dimana frame video bisa berubah sesuai ukuran layar (Responsif), dan disini anda hanya mengubah width dan height seperti dibawah ini.
<iframe width="500" height="280" ----->
Menjadi
<iframe width="100%" height="520" ----->
Hasil:
Terima kasih telah berkunjung, semoga isi dari artikel ini bermanfaat, jangan lupa subscribe dengan menambahkan email anda dibawah agar tidak ketinggalan tips dan trik blogging lainnya. Good Luck.
0 Response to "[4 Tipe] Cara Memasang Video Youtube Di Postingan Blogger / Website"
Post a Comment