Cara Terbaru Membuat Widget Video Responsive
Saya akan membahas tentang cara terbaru membuat dan sekaligus cara pemasangan video youtube responsive di blog, entah di pasang di atas postingan atau widget di sidebar, dari beberapa script yang saya gunakan ada beberapa script yang gagal alias tidak responsif hehe.. akhirnya saya menemukan cara membuat video youtube responsive dengan CSS, silahkan simak caranya dibawah ini.
1. Siapkan video yang ingin anda pasang di postingan,sidebar atau di atas postingan dengan cara menambahkann widget HTML di atas postingan
lihat script pada gambar yang saya blok, silahkan pindahkan dulu ke note pad, atau silahkan copy embed videonya saja, contohnya https://www.youtube.com/embed/DsmwcyH2GAg atau DsmwcyH2GAg&t=51s
2. Lalu jika anda ingin membuat video tersebut autoplay ketika pembaca membuka blog anda, silahkan tambahkanrel=0&autoplay=1
3. Berikut saya berikan script yang sudah saya satukan
Silahkan rubah width dan height nya sesuai dengan keinginan, cuman jika ingin terlihat responsif saya sarankan jangan terlalu besar
4. Agar videonya responsive silahkan tambahkan CSS diatas ]]></b:skin> atau </style>
silahkan rubah ukurannya @media screen sesuai dengan keinginan anda,
5. Jika template anda adalah template amp, cara memasang video youtube di template amp adalah dengan menambahkan
silahkan ganti kode embed nya, dan pastikan anda telah memasang script AMP youtube
6. Jika anda ingin video youtube tersebut terpasang di atas postingan, silahkan tambahkan widget HTML, namun sebelumnya ganti NO menjadi YES seperti kode dibawah ini.
Selamat mencoba, semoga bermanfaat
1. Siapkan video yang ingin anda pasang di postingan,sidebar atau di atas postingan dengan cara menambahkann widget HTML di atas postingan
2. Lalu jika anda ingin membuat video tersebut autoplay ketika pembaca membuka blog anda, silahkan tambahkanrel=0&autoplay=1
3. Berikut saya berikan script yang sudah saya satukan
<iframe width="640"height="360" src="https://www.youtube.com/embed/DsmwcyH2GAg?feature=player_detailpage?rel=0&autoplay=1"frameborder="0"allowfullscreen></iframe>
4. Agar videonya responsive silahkan tambahkan CSS diatas ]]></b:skin> atau </style>
/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
5. Jika template anda adalah template amp, cara memasang video youtube di template amp adalah dengan menambahkan
<amp-youtube
data-videoid="DsmwcyH2GAg"
height="270"
layout="responsive"
width="480"></amp-youtube>
6. Jika anda ingin video youtube tersebut terpasang di atas postingan, silahkan tambahkan widget HTML, namun sebelumnya ganti NO menjadi YES seperti kode dibawah ini.
<b:section class='main' id='main' showaddelement='no'