Pada video kali ini kita mulai dengan source code kosong. Disini saya sudah menyediakan dua buah file source code yaitu youtube.html dan youtube.css. Keduanya masih kosong ya. Pertama kita isikan file HTML terlebih dahulu.

Pertama kita tambahkan boilerplate terlebih dahulu. Lalu kita isikan dengan judul Embedded Youtube. Pada bagian bodi, kita tambahkan juga tag h1 dengan konten Embedded Youtube.

Nah, untuk mengambil kode embed dari Youtube, kita bisa ke situsnya www.youtube.com dan memilih video apa saja. Dalam contoh disitu saya mengambil video dari pelajaran sebelumnya. Perhatikan pada bagian bawah judul ada tombol Share. Kita klik. Lalu kita pilih Embed. Setelah itu kita akan diberikan kode HTML untuk menaruh video ini ke situs kita. Kita copy kode HTML tersebut ke dalam source code kita.

Setelah itu kita tambahkan sebuah paragraf, dengan konten kalimat setelah video Youtube. Kita simpan dan refresh browser. Sekarang di dalam halaman HTML kita sudah terdapat video Youtube yang kita pilih. Dan video ini bisa kita hidupkan dan kita tonton dari halaman HTML kita.

Masalahnya disini adalah video ini menggunakan ukuran width dan height yang tetap. Bisa kita lihat pada kode embed yang diberikan oleh YouTube. Kode ini menggunakan tag iframe. Dan sudah diberikan width dan height dengan nilai tetap. Akibatnya apabila kita menonton dengan menggunakan browser yang ukurannya besar, maka ukuran video tetap segitu juga. Begitu juga apabila kita menonton menggunakan browser berukuran kecil, maka bagian kanan dari video akan terpotong.

Pada latihan kali ini, kita akan menambahkan kode CSS untuk mengubah agar video YouTube ini menjadi responsive. Sebagai contoh, bisa melihat ke halaman HTML yang sudah jadi disini. Pada saat saya memperbesar dan memperkecil layar browser, maka ukuran video akan menyesuaikan. Perhatikan bahwa tulisan pada bagian atas dan bawah video tidak boleh tertutupi oleh video.

Nah, sebelum kita mulai, saya lengkapi beberapa hal terlebih dahulu. Pertama, pada bagian head, kita tambahkan dahulu link untuk ke stylesheet kita, yaitu youtube.css. Setelah itu pada bodi, kita tambahkan sebuah div, dengan class yt-container. Artinya YouTube Container ya. Lalu kita pindahkan iframe Youtube ke dalam div ini.

Oke, sekarang teman-teman silahkan mengerjakan terlebih dahulu latihan ini pada komputer masing-masing. Sebagai hint, bagian yang paling pentingnya adalah kita akan menggunakan properti Position. Setelah itu kita akan menggunakan beberapa properti lain yang telah kita pelajari di dalam playlist ini. Pause terlebih dahulu video ini. Nantinya setelah selesai mengerjakan latihan, teman-teman bisa melanjutkan video ini dan kita akan membahas mengenai bagaimana solusinya.

Oke, sekarang kita akan membahas bagaimana solusi dari latihan ini. Pertama kita buka terlebih dahulu kode css kita yang masih kosong. Dan kita tambahkan selector pertama yaitu untuk memilih iframe di dalam kelas yt-container. Kita tuliskan .yt-container spasi iframe.

Pertama kita ubah dahulu position-nya menjadi absolute. Dan setelah itu kita mesti mengubah ukuran dari iframe agar mengikuti seluruh ukuran dari parentnya. Pertama kita tambahkan dahulu properti left dengan nilai 0, agar bagian paling kiri dari video akan menempel ke parentnya. Dan kemudian kita tambahkan properti top dengan nilai 0, agar bagian paling atasnya juga menempel. Dan setelah itu kita tambahkan properti width dengan nilai 100%, agar lebar video mengikuti seluruh lebar parent. Dan kita tambahkan juga properti height dengan nilai 100%, agar tingginya juga mengikuti seluruh tinggi parentnya.

Kita simpan dan refresh browser. Nah sekarang ukuran dari video youtube sudah mengikuti ukuran dari seluruh browser ya. Dan video ini pun menutupi tulisan judul dan paragraf kita.

Selanjutnya kita ubah agar video YouTube ini mengikuti ukuran dari containernya. Caranya adalah dengan menambahkan selector kelas yt-container. Lalu kita tambahkan properti position dengan nilai relative.

Nah, sekarang video YouTube-nya menjadi hilang ya. Mengapa? Kita perhatikan kembali ke kode HTML. Isi dari container kita hanya ada iframe saja ya. Sedangkan position iframe sudah kita ubah menjadi absolute, sehingga iframe keluar dari flow dokumen. Sekarang browser akan menganggap bahwa container tidak memiliki konten sama sekali, sehingga tingginya menjadi 0.

Sekarang kita mesti mengatur tinggi container. Namun disini ada trik yang mesti kita pahami, bahwa tinggi dari container harus sekian persen dibanding lebarnya. Kita perhatikan lagi nilai attribute pada iframe. Pada saat nilai lebarnya 560, maka nilai tingginya adalah 315. Sekarang kita buka program kalkulator, dan kita menghitung nilai persentasi dari tinggi dibanding lebar. Kita masukkan nilai 315, lalu kita bagi dengan 560. Kita akan mendapatkan nilai sebesar 56,25%. Nilai ini tidak bisa kita gunakan pada properti height ya, sebagai gantinya kita akan menggunakan properti padding-top atau padding-bottom.

Nah, sekarang kita video YouTube kita sudah muncul kembali dengan ukuran yang responsive mengikuti ukuran lebar browser. Dan video ini tidak mengganggu konten pada bagian atas maupun bagian bawah dari video tersebut.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.