Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

$
0
0

Pada tutorial sebelumnya kita telah berhasil membuat tampilan website sederhana yang akan kita gunakan untuk pembuatan background videonya, pada tutorial Cara Membuat Background Video Menggunakan Iframe Youtube Part 2 kita akan langsung membuat background videonya menggunakan iframe yang terdapat pada yotube.

Langkah pertama silahkan teman-teman buka website https://www.youtube.com/ silahkan teman-teman cari sebuah video yang akan teman-teman gunakan sebagai backgroundnya sepeti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Kemudian silahkan teman-teman klik tombol SHARE dan silahkan teman-teman klik juga tombol EMBED seperti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Maka akan tampil sebuah iframe yang akan kita gunakan sebagai background nantinya seperti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Kemudian iframe tersebut silahkan teman-teman copy kita akan tempatkan dibawah class relative-contents seperti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini:

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Pada gambar diatas kita telah berhasil untuk menampilkan video iframe-nya dari youtube, kemudian video tersebut akan kita setting sehingga video tersebut bisa autoplay, dan juga kita akan looping video tersebut, untuk script kita akan tambahkan pada attribute src yang terdapat pada iframe-nya seperti di bawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Jika kita jalankan pada browser maka video yang telah kita masukan akan berjalan secara otomatis dan  akan selalu di looping.

Selanjuntya kita akan lakukan pengaturan pada iframe-nya dengan meanambahkan class pada iframe-nya dan css seperti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Kemudian untuk cssnya seperti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Membuat Background Video Menggunakan Iframe Youtube Part 2

Oke teman-teman itulah pembahasan kita tentang Cara Membuat Background Video Menggunakan Iframe Youtube Part 2.

Semoga bermanfaat.

Terimakasih.

Demo

The post Cara Membuat Background Video Menggunakan Iframe Youtube Part 2 appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170

Trending Articles