Cara Embed Video YouTube di Website

Cara Embed Video YouTube di Website - Video merupakan salah satu konten yang sangat menarik jika diterapakan pada halaman webiste, dengan adanya video tentu akan menjadikan suatu konten pada halaman menjadi sangat beragam apalagi ditambah isi konten dari video terebut memberikan informasi dan manfaat kepada pengguna. Ada beberapa jenis video yang bisa kita terapkan atau di embed pada website, mulai dari video local dari komputer kita ataupun video dari youtube. Nah, pertanyaan nya bagaimana si cara embed videonya ? Mungkin diantara kalian ada yang lagi belajar HTML dan ingin menerapkan video tapi belum tahu caranya atau ada yang lupa lagi cara nya embed video, berikut akan saya bahas dan praktekan bagaimana Cara Embed Video YouTube di Website.

Langkah 1 : Cara Embed Video YouTube di Website

Pada kasus ini saya akan mencoba embed video dari youtube ke halaman webiste, dan caranya sangat mudah sekali. Tentunya sebelum kita embed video kehalaman webite. Saya telah menyiapkan tempalte HTML nya sebagai demo untuk menampilkan video youtube ke halaman website, kalian bisa buat template sendiri atau bisa menggunakan template seperti yang saya bua berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cara Embed Video YouTube di Website</title>
    <style>
        .container {
            width: 560px;
            margin: auto;
            background: #999999;
        }
        footer {
            padding: 5px 10px;
            background-color: #1CBABC;
            color: #F4F5ED;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-video">
            <!-- Tempatkan Video Disini -->
            
        </div>
        <footer>
            <h3>Cara Embed Video YouTube di Website</h3>
        </footer>
    </div>
</body>
</html>

Langkah 2 : Cara Embed Video YouTube di Website

Setelah membuat template seperti diatas, selanjutnya silahkan buka youtube dan pilih video youtube untuk nanti kita terapkan pada template yang telah kita buat. Setelah video sudah kita pilih selanjutnya kita klik share dibagian kanan bawah video, untuk lebih jelasnya bisa kalian lihat seperti pada gambar dibawah ini.

Setelah itu, akan muncul pop up yang diharuskan kita memilih, karena kita akan menerapkan pada halaman webiste kita, maka kita pilih Embed.

Kemudian akan muncul pop up lagi, pada tampilan ini silahkan kalian bisa copy kode disebelah kiri video atau klik copy pada bagian bawah kode.

Langkah 3 : Cara Embed Video YouTube di Website

Langkah selanjutnya, silahkan paste kode video pada template HTML yang telah dibuat seperti berikut.

<body>
    <div class="container">
        <div class="content-video">
            <!-- Tempatkan Video Disini -->
            <iframe width="560" height="315" src="https://www.youtube.com/embed/8iEgci-npU8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <footer>
            <h3>Cara Embed Video YouTube di Website</h3>
        </footer>
    </div>
</body>

Setelah semua telah selesai, silahkan simpan filenya dengan nama index.html kemudian buka pada browser masing - msing dan lihat hasilnya. Maka akan muncul video yang sudah kita embed pada halaman website. Selesai

Bagaimana, cukup mudah bukan Cara Embed Video YouTube di Website ? Baik, cukup sekian pembahasan kali ini semoga bisa bermanfaat dan membantu buat kalian yang sedang belajar HTML, selamat mencoba dan tetap semangat yah :)

12 Agustus 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat