Cara Untuk Membuat Embed Video Responsive Di WordPress

Terkadang kita ingin mengembed suatu video dalam post di wordpress. Bisa…!, tetapi kemudian permasalah timbul ketika laman di buka di perangkat mobile yang memilki layar kecil. Untuk mengatasi masalah ini maka kita harus membuat video embed tersebut menjadi responsive atau lebarnya akan menyesuaikan lebar layar pada perangkat pembuka.

Untuk Membuat Embed Video Di WordPress Menjadi Responsive, anda cukup melakukan sedikit perubahan pada template wordpress blog anda saja

1. Tambahkan Script berikut functions.php template:

/*  Add responsive container to embeds
/* ------------------------------------ */ 
function alx_embed_html( $html ) {
    return '
' . $html . '
';
}
 
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

2. Dan berikutnya, tammbahkan CSS yang akan membuatnya responsif pada style.css:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Itu saja! Anda sekarang telah membuat iframe, objek, embed dan video (HTML5) elemen responsif. Responsif CSS akan selalu menampilkan video dengan aspek rasio 16: 9.

Kode ini juga akan bekerja dengan Jetpack embeds.

referensi : alxmedia.se