Belajar HTML5 : Cara Membuat Embed Video Responsive

Belajar HTML5 : Cara Membuat Embed Video Responsive. HTML sekarang sudah mencapai versi 5, sering disebut dengan HTML5 dimana HTML 5 sudah menggunakan Teknologi RWD (Responsive Web Design) dimana kita hanya membutuhkan satu layout yang dapat digunakan untuk berbagai jenis ukuran layar, dimana dengan menggunakan HTML5 maka dalam proses desain akan lebih mudah karena dengan itu kita dapat membuat sebuah website yang responsive di berbagai jenis ukuran layar di gadget, laptop, dan smartphone.

Ok berbicara mengenai teknologi RWD. Untuk embed video untuk resposnive kita harus menggunakan HTML5, dimana bila kita embed video maka akan responsive dan memiliki user interface yang mudah. Nah berikut cara membuat Embed Video HTML5 responsive.

Cara Membuat embed Video Responsive dengan HTML 5:


1. Buka text editor anda, kemudian buat sebuah file baru dan beri nama index.html

2. Buat  folder baru dan simpan file html tersebut pada satu folder.

3. Setelah itu simmpan file index.html tersebut dalam satu folder.

4. Cari dan pindah  video yang akan di embed.

5 Ketikan script html dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>
<center>
<video width="700" controls>
  <source src="ra_iso_turu.mp4" type="video/mp4">
  <source src="ra_iso_turu.mp4" type="video/ogg">
</video>
</center>

<center><p>Ukuran awal dari video tersebut adalah 700px. dan bila di resize maka ukurannya akan otomatis menjadi responsive.</p></center>

</body>
</html>

6. Setelah itu simpan, disini video kami memiliki nama file ra_iso_turu.mp4 Dan coba jalankan di aplikasi browser anda, maka tampilannya akan seperti di bawah ini:



Membuat embed video HTML5
Membuat embed video HTML5


7. Lalu coba resize dengan ukuran layar yang berbeda maka tampilan dari embed video html5 tersbut akan ikut menjadi responsive mengikuti ukuran layar gadget, atau smartphone anda. Tampilannya akan responisvie seperti gambar di bawah ini:
Membuat embod video responsive dengan HTML5
Membuat embod video responsive dengan HTML5





Baca Juga :
Belajar SQL: Perintah-Perintah SQL Paling Sering Digunakan
Belajar HTML Lengkap | Apa itu HTML| Fungsi| Penjelasan dan Praktek
Belajar CSS Terlengkap | Pengertian, Fungsi, Praktek dan Penjelasannya 

Sekian selamat anda telah berhasil membuat embed video responsive menggunakan html5 dan menggunakan teknologi web responsive web design. Sekian semoga artikel ini bermanfaat. Dan bila ada yang ingin di tanyakan terkait artikel di atas silahkan berikan komentar anda di kolom komentar dan kami akan menjawab pertanyaan yang anda berikan pada kami.


Tagar
HTML HTML5

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel