Selasa, 12 November 2013

Switching and Video Playback use Youtube Player API iframe version

Dari pada vakum kelamaan, mendingan ngulas kembali trik dan tips seputaran pemasangan embed video si YouTube. Koben too sudah beberapa kali menuliskan trick penerapan embed video YouTube ke dalam sesi postingan blog. Tidak jauh berbeda dengan yang dulu-dulu, sekarang AA akan berbagi lagi namun dengan sentuhan berbeda :P Sebelum itu jalan-jalan dulu:
Do not forget to always back up your template!
Masukan script berikut diatas/sebelum tagging penutup </body>
<script src="http://www.youtube.com/iframe_api"></script>

<script>
//<![CDATA[
var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
"height": 315,
"width": 500,
"videoId": '_VFcEPGo_wg', // ID video yg mana gambar menjadi default tampilan embed video.
playerVars: {
'rel': 0,
'autoplay': 0,
'loop': 0,
'disablekb': 0,
'egm': 0,
'autohide': 1,
'start': 0,
'showinfo': 0,
'iv_load_policy': 3, // Standarnya 1. Jika diatur ke 1, penjelasan video yang akan muncul secara default. Jika diatur ke 3, penjelasan video tersembunyi secara default.
'cc_load_policy': 1, // Ini subjudul. Default didasarkan pada pengaturan pengguna. Jika diatur ke 1, bahkan jika pengguna ingin untuk menghapus judul, ditutup captioning ditampilkan secara default.
'color': 'white',
'theme': 'light',
}
});
};
//]]>
</script>
Seting-seting lah dahulu menurut kebutuhan kalian.
Ketika memosting, tulislah syntax berikut (save syntax ditempat aman, biar nggak lupa)<div id="player"></div>
<p>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 1]</span>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 2]</span>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 3]</span>
</p>
Perhatikan tulisan ID-VIDEO, gantikan dengan ID video yg akan kalian tampilkan!http://www.youtube.com/watch?v=zd2DfuVYqN4This is ID-VIDEO zd2DfuVYqN4 You got it? Kalau sobat mau melakukan mempercantik tampilan embed video YouTube, maka buat sendiri ya dengan ID #player { bla-bla-bla } :D Untuk demonya silahkan buka link brkt diikuti dengan memencet tombol Preview ya ;)Resource by: jsdo.it/No-Delay/3us8
Happy coding \m/

Tidak ada komentar:

Posting Komentar