Tampilkan postingan dengan label html. Tampilkan semua postingan
Tampilkan postingan dengan label html. Tampilkan semua postingan

Kamis, 28 Februari 2019

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

Senin, 16 April 2018

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
Share:

Selasa, 03 April 2018

Menampilkan Nama pada Saat Mengarahkan Mouse di Gambar

Artikel kali ini membahas tentang trik sederhana tentang cara Menampilkan Nama Saat Mengarahkan/ Hover Mouse pada Gambar. Ada banyak macam tag HTML yang telah disediakan untuk dapat kita gunakan sesuai kebutuhan, salah satunya adalah penggunaan atribut title di dalam tag img. Contoh akhirnya bisa Anda lihat pada gambar dibawah ini:
Contoh Jadi/ Akhir

Bagaimana Caranya?

Caranya sangat sederhana, ketika Anda ingin menampilkan suatu gambar menggunakan tag img, Anda cukup menambahkan atribut title seperti 1 baris kode dibawah ini:

<img src="http://namaweb.com/images/maju-mundur.png" title="Maju Mundur">

Apabila Anda perhatikan baris diatas, terdapat bagian title="Maju Mundur", maksud atribut tersebut adalah memberitahukan pada browser bahwa file gambar tersebut memiliki nama yang ketika seorang user mengarahkan mousenya ke gambar akan muncul namanya.

Semoga bermanfaat
Share: