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


<iframe width="640"height="360" src="https://www.youtube.com/embed/DsmwcyH2GAg?feature=player_detailpage?rel=0&autoplay=1"frameborder="0"allowfullscreen></iframe>
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>

/* 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}}
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

<amp-youtube
     data-videoid="DsmwcyH2GAg"
     height="270"
     layout="responsive"
     width="480"></amp-youtube>  
 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.

<b:section class='main' id='main' showaddelement='no'
Selamat mencoba, semoga bermanfaat

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser