Hi, My name is Muhammad Azmi

I'm from Palembang, one of best culinary city in Indonesia. I learn to code by myself from 2014 until now.

About Me

I'm a Full Stack Web Developer with over 5 years of experience specializing in backend development. Experienced with all stages of the development cycle for dynamic web projects. Having an in-depth knowledge including HTML5, CSS, CSS3, PHP, Codeigniter, JavaScript, JQuery, Bootstrap. You can see my latest project on AmperaKoding

Blog

LATEST FORM Blog

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

Send Me A Email

Address

ContactInfo

Address:

Perumnas Sako, Palembang, South Sumatra, Indonesia

Phone:

+6281228289766

Email:

amperakoding@gmail.com