Membuat Shortcode YouTube Responsif di WordPress

Memanfaatkan video YouTube dalam konten website adalah cara efektif untuk meningkatkan keterlibatan pengunjung. WordPress memungkinkan penggunaan shortcode untuk memudahkan integrasi fitur seperti ini. Artikel ini akan memandu Anda melalui proses pembuatan shortcode YouTube yang responsif tanpa perlu plugin tambahan.

Langkah 1: Tambahkan Fungsi Shortcode ke File Functions.php

Pertama, Anda perlu menambahkan kode berikut ke dalam file functions.php dari tema WordPress Anda. Kode ini menciptakan sebuah shortcode baru yang memungkinkan Anda menyematkan video YouTube yang responsif.

function youtube_embed_shortcode($atts) {
    $a = shortcode_atts(array(
        'url' => ''
    ), $atts);

    $url = $a['url'];
    $parsed_url = parse_url($url);
    parse_str($parsed_url['query'], $params);
    $video_id = $params['v'];

    return '<div class="youtube-responsive-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr($video_id) . '" frameborder="0" allowfullscreen></iframe>
    </div>';
}

add_shortcode('youtube', 'youtube_embed_shortcode');

Penjelasan Kode

• shortcode_atts: Fungsi ini memungkinkan Anda menentukan atribut default untuk shortcode.
• parse_url dan parse_str: Fungsi ini digunakan untuk menguraikan URL yang diberikan ke dalam ID video YouTube.
• esc_attr: Memastikan keamanan dengan membersihkan atribut sebelum ditambahkan ke HTML.
• add_shortcode: Fungsi ini mendaftarkan shortcode yang Anda definisikan.

Langkah 2: Tambahkan CSS untuk Responsivitas

Untuk membuat video YouTube responsif, tambahkan CSS berikut ke dalam file CSS tema Anda atau melalui customizer WordPress di bagian ‘Additional CSS’:

.youtube-responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.youtube-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Penjelasan CSS

• .youtube-responsive-container: Menetapkan posisi relatif dan padding untuk mempertahankan rasio aspek 16:9.
• iframe: Mengatur iframe agar ukurannya menyesuaikan secara penuh dengan kontainer yang menyertakan video.

Langkah 3: Menggunakan Shortcode

Setelah menambahkan fungsi dan CSS, Anda bisa menggunakan shortcode [youtube url="LINK_YOUTUBE"] di editor WordPress. Ganti “LINK_YOUTUBE” dengan URL video YouTube yang ingin Anda tampilkan.

Dengan langkah-langkah di atas, Anda dapat dengan mudah menyematkan video YouTube yang responsif di website WordPress Anda tanpa memerlukan plugin tambahan. Ini tidak hanya mengurangi ketergantungan pada plugin eksternal tetapi juga meningkatkan kecepatan pemuatan halaman.