CARA BUAT HTML VIDEO PENDEK DI BLOGSPOT ~ Media Global.site

Berikut adalah contoh kode HTML untuk menampilkan video pendek di Blogspot. Anda bisa menggunakan tag <video> HTML5 untuk menampilkan video langsung di halaman blog Anda. Video dapat diunggah ke platform seperti YouTube, Google Drive, atau langsung di-host di server Anda.

Kode HTML untuk Video Pendek:

<!DOCTYPE html>

<head>

<style>

/* Styling untuk video container */

.video-container {

width: 100%;

max-width: 600px; /* Sesuaikan lebar video */

margin: 0 auto;

text-align: center;

}

/* Video styling */

video {

width: 100%;

height: auto;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

/* Deskripsi video */

.video-description {

margin-top: 10px;

font-size: 16px;

color: #333;

}

</style>

</head>

<body>

Browser Anda tidak mendukung tag video.

</video>

Ini adalah contoh video pendek yang ditampilkan di Blogspot.

</div>

</body>

</html>

----------------

Cara Menggunakan di Blogspot:

Login ke akun Blogspot Anda.
Buka postingan atau halaman yang ingin Anda edit.
Pilih mode HTML (bukan mode Compose).
Tempelkan kode di atas ke dalam editor HTML.
Ganti src pada tag <source> dengan URL video Anda.
- Jika video di-host di Google Drive, pastikan Anda mengubah izin berbagi menjadi "Publik" dan gunakan link unduhan langsung.
- Jika video di YouTube, gunakan kode embed dari YouTube (lihat contoh di bawah).
Ganti teks deskripsi di dalam .video-description sesuai kebutuhan.
Simpan atau publikasikan postingan/halaman.

Contoh URL Video:

Hosting Sendiri:
<source src="https://www.example.com/video-pendek.mp4" type="video/mp4">
Google Drive:

Unggah video ke Google Drive, ubah izin berbagi menjadi "Publik", dan dapatkan link unduhan langsung.
<source src="https://drive.google.com/uc?export=download&id=FILE_ID" type="video/mp4">

YouTube:

Gunakan kode embed dari YouTube:
<iframe width="100%" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Fitur:

Video Controls: Video memiliki tombol play, pause, volume, dan fullscreen.
Responsif: Video akan menyesuaikan lebar container.
Deskripsi: Deskripsi video dapat ditambahkan di bawah video.
Multi-Format: Mendukung format video MP4, OGG, dan WebM.

Contoh Video dari YouTube:

Jika Anda ingin menggunakan video dari YouTube, berikut adalah contoh kode embed:

Ini adalah contoh video pendek dari YouTube.

</div>

Hasil:

Video akan ditampilkan di halaman blog Anda dengan kontrol play, pause, dan fullscreen.
Deskripsi video akan muncul di bawah video.
Video akan responsif dan menyesuaikan lebar layar pengguna.

Semoga membantu! 😊 Traktir kopi seiklasnya donasi

Link List