YouTube sudah menjadi sumber berita dan informasi terkini dengan beragam kisah dunia. YouTube memungkinkan pengguna menampilkan jurnalisme berkualitas ketika ada banyak peristiwa penting yang ingin disampaikan kepada pengguna YouTube. Karena penting memungkinkan pengguna YouTube menggunakan saluran tersebut untuk melengkapi informasi didalam website.
Menambahkan media atau video di situs merupakan satu cara menambah parameter Google di penelusuran. Anda dapat melengkapi isi content yang cocok untuk menambah pengalaman pengunjung tentang isi artikel yang disertai dengan YouTube video tutorial. Lihat tips sederhana cara memasang video YouTube tanpa plugin JavaScript di website dengan mudah dan Responsif.
Sebelum embed video YouTube ke situs, pastikan Anda sudah membuat video dan tersedia untuk publik, sebab link atau saluran tersebut dapat di lihat oleh semua pengguna.
• HTML
Copy dan paste HTML di bawah ini dan ikuti comments yang berada di HTML untuk tutorial berikutnya. Dan jika sudah memiliki situs, Anda langsung mengikuti cara kerja CSS dan HTML berikutnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Ujicode</title>
<style>
/* CSS Style */
</style>
</head>
<body>
<!-- Main Element -->
</body>
</html>• CSS
Rekatkan CSS yang diperkecil dibawah ini. CSS dipercantik dan dibentuk dengan baik. Meminimalkan CSS tentunya akan meningkatkan Performa Situs Web. Atribut
width dan height akan merespon iframe dan object yang anda embed./* CSS Style */
body{font-family:'Arial',sans-serif}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-responsive iframe,.video-responsive object,.video-responsive embed {position:absolute;top:0;left:0;border:0;width:100%;height:100%}
iframe{border:none;overflow:hidden}
small{margin-left:0}
/* CSS Judul */
.judul{bottom:0;padding:21px 55px 30px 34px;background:rgb(15,15,15);color:#FFFFFF}
.other-title{font-size:40px;line-height:56px;font-weight:700;margin-bottom:3px;color:#FFC107}• HTML
Memutar Video YouTube dalam HTML, copy dan paste HTML di bawah ini. Tentukan
iframe elemen di halaman web Anda dan isikan src atribut mengarah ke URL video YouTube. Gunakan juga atribut width dan height untuk menentukan dimensi pemain.<!-- Main Element --> <div class="embed-video"> <div class="video-responsive"> <iframe allowfullscreen="" width="400" height="225" rel="nofollow" src="https://www.youtube.com/embed/TGt-vocYgv4">video</iframe> </div> <small>Duration: 1:09</small> </div>
Video yang Anda unggah akan memiliki id unik di bagian shere pada setiap video YouTube.
YouTube akan menampilkan id (seperti:
YouTube akan menampilkan id (seperti:
TGt-vocYgv4). Silahkan ambil id-nya saja. Anda dapat menggunakan contoh id ini atau id YouTube Anda, dan merujuk ke video Anda dalam kode HTML.Bagaimana cara Putar YouTube Otomatis dan Mute (Bisukan)?
Ada beberapa cara menjalankan YouTube secara otomatis, namun Audio visual secara otomatis dapat mengganggu pengunjung dan berakhir dengan pengalaman yang tidak baik, sehingga video otomatis hanya dapat dijalankan dengan audio mute (Bisukan). Dan lebih jelasnya lihat elemen code dibawah ini.
<!-- Main Element - Otomatis dan Mute: ?autoplay=1&mute=1 --> <div class="video-box"> <div class="embed-video"> <div class="video-responsive"> <iframe allowfullscreen="" width="400" height="225" rel="nofollow" src="https://www.youtube.com/embed/TGt-vocYgv4?autoplay=1&mute=1">video</iframe> </div> <!-- Judul --> <div class='judul'> <div class='other-title'>Example Video</div> <small>Duration: 1:09</small> <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div>
YouTube memberikan peristiwa lain di situs. Kebijakan Browser Chromium tidak mengizinkan putar otomatis di semua kasus. Namun, putar otomatis tanpa suara selalu diizinkan. Jika Anda menginginkan itu, Anda dapat menambahkan autoplay dan mute setelah id. Kelemahan lain embed video YouTube adalah pada akhir video; channel Anda masih tertaut dengan YouTuber yang lain. Semoga bermanfaat tutorial tentang: Bagaimana Cara Embed Video YouTube Responsive?
0 Comments
Post a Comment