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:

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
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.

Comments

Membuat Tombol Kembali ke Halaman Sebelumnya dengan HTML dan Javascript

Pada coretan kali ini, saya akan memberikan tips sederhana tentang cara Membuat Tombol Kembali ke Halaman Sebelumnya dengan HTML dan Javascript. Bagi Anda yang membuat suatu aplikasi yang berhubungan dengan HTML dan Javascript mungkin tutorial kali ini akan bermanfaat. Bagaimana Caranya? Tanpa basa-basi panjang lebar, langsung saja copas script berikut ini dan silahkan dicoba. Berikut kodenya: Semoga bermanfaat

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

Menampilkan Total Record Data di Tabel Database dengan Codeigniter dan MySQLi

Pada tulisan kali ini, saya ingin berbagi tentang tutorial cara Menampilkan Total Record Data di Tabel dengan Codeigniter dan MySQLi. Bagi Anda yang mengikuti tulisan saya di blog ini, mungkin pernah membaca yang versi PHP Nativenya dengan judul Cara Menampilkan Total Record dari 1 Tabel MySQL dengan PHP . Tutorial ini dibuat didasarkan pertanyaan yang diajukan teman-teman yang order tutorial saya seperti yang ada di judul Tutorial Membuat Website Marketplace dengan Codeigniter, Bootstrap dan IonAuth . Pada tutorial itu memang sengaja tidak saya buatkan yang kalau dilihat di halaman Admin data yang ditampilkan tidak berubah. Nah di tutorial ini, saya sedikit menggunakan bagian atau coding atau template dari AdminLTE yang bisa Anda lihat contoh hasil jadinya pada foto diatas yang kotak berwarna warni. Jadi bagi Anda yang sedang menggunakan template tersebut, Anda dapat melihat hasilnya nanti secara langsung dengan catatan: Anda telah paham basic atau dasar dari Codeigniter da

Arena PHP

Search This Blog