Skip to main content

Cara Membuat Video Embed Youtube di Website Menjadi Responsive dengan Bootstrap


Pada postingan kali ini saya akan membagikan Cara Membuat Video Embed Youtube di Website Menjadi Responsive dengan Bootstrap. Langsung saja tanpa basa basi yang lebih panjang, silahkan Anda buka project dan langsung ke file view atau html yang akan Anda masukkan video embed dari youtubenya.

Pada dokumentasi yang disediakan oleh Bootstrap telah diberikan caranya yaitu dengan mengatur tag div nya seperti berikut:

Pada kodingan yang ada diatas, Anda dapat memperhatikan bahwa ada beberapa poin penting yaitu:
  1. Aspect Ratio
    Aspect ratio berguna untuk mengatur rasio atau perbandingan gambar atau video yang ditampilkan di layar. Bootstrap telah menyediakan rasio tersebut yang dapat Anda coba dan pilih sendiri. Rasionya meliputi; 1:1, 4:3, 16:9 dan 21:9
  2. Class yang dipakai
    Class div yang ada harus Anda masukkan dengan ketentuan yang telah dibuat oleh Bootstrap seperti berikut ini:
    <div class="embed-responsive embed-responsive-16by9">
    Tag diatas mengandung kata 16by9 yang artinya ia menggunakan rasio 16:9, Anda juga dapat merubahnya sesuai dengan yang telah diberikan oleh Bootstrap.
Contohnya Anda dapat melihatnya di web pribadi saya di MuhAzmi.com. Silahkan gunakan device yang berbeda untuk mencoba tampilan yang responsive pada video yang saya letakkan disana.

Semoga bermanfaat.
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Fungsi base_url pada Native PHP

Halo semua, kali ini saya akan memberikan tutorial tentang Cara Membuat Fungsi base_url pada Native PHP, fungsi ini dapat ditemui pada salah satu framework yang ada, yaitu Codeigniter. Fungsi base_url yang akan kita buat ini merupakan fungsi untuk mendapatkan link atau url dasar suatu project atau website. Apabila belum mengerti, maka bisa kita lihat pada contoh berikut: <?php echo $base_url; // akan menghasilkan: http://localhost/namaprojectanda atau http://www.google.com ?> Selanjutnya kita masuk ke kodingan fungsi ini, cukup salin dan simpan script berikut: Jadi, ketika Anda ingin menggunakan fungsi ini cukup panggil/ include kan pada bagian yang akan ditampilkan. Misalkan Anda sedang membuka file produk.php, kemudian Anda ingin mendapatkan base_url dari produk yang akan ditampilkan maka cukup panggil nama fungsi diatas dan gabungkan dengan script yang telah Anda buat. Saya pribadi merasakan manfaat yang sangat besar dari fungsi ini pada native php, terutam...
Post a Comment
Read more

Cara Konfigurasi Kirim Email pada Library ion_auth Tanpa atau dengan SMTP

Pada artikel kali ini saya akan membahas tentang Cara Konfigurasi Kirim Email pada Library ion_auth Tanpa atau dengan SMTP. Artikel ini dibuat karena banyak yang masih bingung cara setup kirim email di ion_auth. Artikel ini juga akan saya masukkan di file google drive, dan bagi Anda yang telah memilikinya silahkan cek kembali. Baiklah tanpa basa-basi panjang lebar lagi silahkan perhatikan langkah-langkahnya berikut ini. TANPA SMTP Perhatikan 2 baris yang saya blok di gambar diatas pada file ion_auth.php pada folder config. Silahkan Anda ubah site_title menjadi nama web Anda yang valid/ benar misalkan: azmicolejr.com dan admin_email seperti: mail@azmicolejr.com. Email tersebut harus Anda miliki/ buat di server Anda. Scroll ke bawah dan pastikan $config['use_ci_email'] = FALSE; telah dirubah nilainya dari FALSE menjadi TRUE. Hal ini akan membuat ion_auth mengirimkan format email dengan fungsi mail() Selesai CATATAN Supaya metode ini dapat berjalan, pastik...
Post a Comment
Read more

Custom Error pada Proses Upload File Codeigniter

Pada tutorial ini kita akan membahas bagian Custom Error pada Proses Upload File Codeigniter yang biasa Anda temui ketika menggunakan framework Codeigniter . Ada banyak macam error yang ada di Codeigniter, seperti: Database Email Form Validasi FTP Library Image/ Gambar Migrasi Profiler Upload file Pada artikel kali ini saya hanya membahas bagian Upload yang berisi tentang language atau bahasa yang secara default akan ditampilkan oleh Codeigniter. Anda bisa memodifikasinya secara langsung ke file tersebut pada direktori system > language > english. Kemudian pilih bagian upload_lang.php yang tampilannya seperti di gambar berikut: Nah, tinggal Anda ganti ke bahasa indonesia atau kata-kata Anda sendiri di bagian 'Unable to find a post variable called userfile'. Begitu juga untuk bagian lainnya apabila ingin Anda ubah. Jadi, ketika suatu project yang sudah Anda integrasikan dengan Codeigniter khususnya form_validation maka error yang Akan ditampi...
Post a Comment
Read more