Как создать кастомные элементы управления видео-плеером Youtube?

Question

[Svirepyy_Barsik]

Помогите создать кастомные элементы управления видео-плеером Youtube как на этой странице (первое большое видео) www.nurturedigital.com/work/puma-all-star-group

Знаю только что это сделано с помощью IFrame Player API Но как сделать это чтобы всё выглядело именно как на той странице, я не знаю. Кто уже имел дело с IFrame Player API или просто лучше меня понимает как это реализовать, напишите. А если возможно, то скиньте пожалуйста готовый код. Буду очень признателен.

Answer 1

[frees2]

Это поверху оригинального плейера, некомифлю но конечно красиво. Но не работает в хроме( по крайней мере у меня)
Лучше стили менять в самом плейере, типо ( theme: "light", пример рабочий. С белой полоской заместо красной) Нажатие без перегрузки

locris2= '<span onclick="player.loadVideoById(\''+loc+ '\', 0);return false"><img src="https://i1.ytimg.com/vi/'+ locris + '/default.jpg" align="left"  width="23%" height="8%" ></span>' };

------

<div id="player" class="Дополнительный дизайн плейера" ></div>

var player;  function onYouTubeIframeAPIReady() 
{ player = new YT.Player('player',{ videoId:'<?php echo''.$fulluri2.'' ; ?>',
playerVars: { autoplay: 1, html5: 1, theme: "light", modesbranding: 0,
color: "white", iv_load_policy: 3, showinfo: 0, controls: 2, 'wmode':'opaque',<?php  echo ''.$list.''; ?>}, }); }  
var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Answer 2

[Svirepyy_Barsik]

Ни хрена у меня не получается сделать точно так же как на той странице...