Pada tutorial ini kami ingin membagikan cara embed halaman website ke dalam halaman atau postingan di wordpress. Kita bisa melakukan dengan menggunakan plugin yaitu menggunakan advanced iframe plugin Show
baik langkah langkah nya adalah sebagai berikut : di pencarian ketikan advanced iframe > lalu install Selanjuta klik activated setelah diaktifasi > cek menu post lalu > add new pada bagian editor klik add advanced iframe lalu ketikkan alamat url yang akan di embed. misal disini adalah 1001tutorial.com selanjutnya simpan dan lihat hasilnya. jika berhasil maka dipost anda akan muncul halaman yang anda embed atau sematkan. ikuti tutorial menarik lainnya di1001tutorial.com Berikut contoh embed halaman website Pada tutorial sebelumnya, kita sudah belajar cara menambahkan gambar di HTML. Namun, ini belumlah cukup.. karena sekarang konten di web tidak hanya dalam bentuk teks dan gambar saja. Konten lainnya yang bisa ditambahkan di HTML adalah audio dan juga video. Nah, pada tutorial ini.. kita akan belajar cara menambahkan video di HTML. Mari kita mulai… Cara Menambahkan Video di HTMLKita membutuhkan sebuah media player untuk menampilkan video di HTML. Dulu.. Sebelum ada HTML 5, media player di HTML dibuat dengan program eksternal seperti adobe flash. Namum, kini sudah tidak dipakai lagi. HTML sekarang punya tag baru untuk membuat media player, yakni tag Jika tag video di buka pada browser yang tidak mendukungnya, maka teks Tapi, kalau mendukung.. videonya yang akan ditampilkan. Contoh:
Hasilnya: Live Demo Browsermu tidak mendukung tag ini, upgrade donk!Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan. Ini karena videonya berada dalam satu folder dengan file HTML. Jika video tersebut tersimpan di folder yang berbeda, maka perlu ditulis alamat folder atau path-nya. Misalkan, saya meneruh videonya di dalam folder
..dan jika videonya berada di website yang berbeda, maka kita harus mengisi atribut
Format Video yang DidukungTidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang didukung: 1
Jika kamu punya video dengan format yang berbeda dari ketiga format tersebut, maka kamu harus mengubahnya agar bisa ditambahkan ke HTML. Atribut untuk VideoTag
Jika atribut bernilai Contoh:
Bisa disingkat menjadi:
Jika nilai atribut bernilai Contoh:
Nah, untuk atribut lainnya, kamu bisa cek di MDN: The Video Embed element. Video Sebagai Gambar Animasi GifBanyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan juga Google menyarankan untuk menggunakan video daripada gif.2 Mengapa? Karena ukuran file dari video jauh lebih kecil dibandingkan dengan gif dan juga tentunya akan mempengaruhi kecepatan download. Nggak percaya? Mari kita bandingkan: File
cat-herd.gif punya ukuran Terbukti kan, file video lebih kecil daripada gif. Lalu, bagaimana cara membuat video menjadi gambar gif di HTML. Caranya sama seperti menambahkan video biasa, tapi kita harus mengaktifkan beberapa atribut seperti Contoh:
Hasilnya: Live Demo Browsermu tidak mendukung tag ini, upgrade donk!Subtitle untuk VideoSubtitle adalah teks yang akan ditampilkan dalam video. Biasanya digunakan untuk terjemahan atau alih bahasa dari video dan juga untuk membantu tuna rungu (orang tuli) untuk menyerap informasi pada video. Subtitle pada HTML dapat kita tambahkan dengan tag Format file subtitle untuk video di dalam HTML adalah WebVTT ( Jika kamu punya subtitle dengan format
SubRip Text ( Sekarang mari kita coba contohnya:
Dan berikut ini isi file:
Hasilnya: Catatan penting: Subtitle tidak akan ditampilkan jika kita membuka file HTML secara langsung dari browser. Coba perhatikan di bagian address bar, jika di sana ada tulisan File.. berarti kita membuka file HTML secara langsung. Namun, jika di address bar ada HTTP atau HTTPS.. itu artinya kita membuka file HTML melalui web server. ..dan juga jika format file Pastikan formatnya valid, silahkan gunakan Live WebVTT Validator untuk pengecekan. Menmabahkan Video dari YoutubeSaat tidak ingin repot-repot mengubah format video, kita bisa manfaatkan Youtube. Tinggal upload saja videonya ke Youtube. Nanti kita akan dapat id unik dari video. Id unik ini bisa kita dapatkan dari URL video. Contoh: Youtube sendiri sudah punya media player, jadi kita tidak pelu membuatnya dengan tag Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah Contoh:
Perhatikan URL yang digunakan pada atribut Hasilnya: Sebenarnya ada cara gampangnya.. Pada video Youtube yang ingin kita embed, klik saja tombol share. Maka akan muncul opsi untuk share video, pilih saja embed.. ..dan kita akan mendapatkan kode HTML untuk embed videonya. Kode ini bisa kita copy ke file HTML. Apa Selanjutnya?Kita sudah belajar cara menampilkan video. Baik itu video dari file lokal dan juga video dari Youtube. Nah, berikutnya silahkan pelajari tentang:
Apa itu HTML Embed?Embed pada HTML dapat diartikan sebagai kemampuan pada HTML (aplikasi) dalam memasukkan data atau object dari software lain. Tag embed sering digunakan untuk menampilkan konten interaktif halaman web external, memutar video, audio dan juga membuka file gambar.
Embed video itu apa?Embedding video and/or audio in a web page and controlling its playback. Menggabungkan vidio dan/ atau audio di sebuah halaman web dan mengendalikan tayangannya.
Format video apa saja yang dapat dimasukan ke dalam HTML?Beberapa format video yang didukung oleh HTML <video> element. File MPEG 4, dengan video codec H264, dan audio codec AAC. File Ogg, dengan video codec Theora dan audio codec Vorbis. File WebM dengan video codec VP8 dan audio codec Vorbis.
|