Cara Embed Video Youtube Otomatis Responsive & Lebar Penuh di WordPress

Tambahkan sedikit kode ini cukup sekali saja, maka video Youtube Anda akan tampil lebar penuh dan responsive secara otomatis tiap kali menambahkan postingan.

Untuk membuat video responsive atau menyesuaikan sesuai gadget, mungkin cukup merepotkan dan tidak efisien apabila harus menambahkan seperti style div atau class setiap kali Anda insert video ke dalam postingan WordPress Anda. Terutama bagi developer web WordPress yang ingin memudahkan client-nya ketika ingin embed video dari Youtube.

Cara Tambahkan Video Youtube dan Membuatnya Rata Tengah di WordPress

Mengapa Sebaiknya Tidak Upload Video Langsung ke WordPress

Om akan membagikan script yang cukup sekali saja Anda tambahkan ke tema Anda, tanpa perlu menambahkan berulangkali setiap menambahkan video.

Tambahkan script stylesheet berikut ke dalam file css tema Anda, bisa pada style.css utama tema Anda.

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

Kemudian tambahkan script javascript berikut ke dalam file script website Anda.


jQuery(document).ready(function($) {
   var all_oembed_videos = $("iframe[src*='youtube']");

   all_oembed_videos.each(function() {
      $(this).removeAttr('height').removeAttr('width').wrap( "<div class='embed-container'></div>" );
   });
})

Atau jika bingung, cukup tambahkan semua scipt di bawah ini pada file functions.php tema Anda. Letaknya dapat Anda temukan di public_html → wp-content → themes → (tema aktif Anda) → functions.php.


function omwp_style_embed_youtube() {
?>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<?php
}

add_action( 'wp_enqueue_scripts', 'omwp_style_embed_youtube');

function omwp_script_embed_youtube() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var all_oembed_videos = $("iframe[src*='youtube']");

all_oembed_videos.each(function() {
$(this).removeAttr('height').removeAttr('width').wrap( "<div class='embed-container'></div>" );
});
})
</script>
<?php
}
add_action( 'wp_footer', 'omwp_script_embed_youtube' );

Cara Menambahkan Video Youtube

Setelah scipt tadi ditambahkan, untuk menambahkan video, Anda cukup menyalin atau copy link dari video Youtube dan paste ke dalam editor postingan Anda.

video-youtube-lebar-penuh-responsive

Silahkan cek postingan di halaman pengunjung (frontend). Seharusnya video tadi sudah mengisi lebar penuh sesuai lebar konten pos Anda, dengan tinggi yang menyesuaikan.

Selain itu video seharusnya sudah responsive ketika diakses menggunakan handphone maupun table.

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *