Full customization of the Youtube player

To fully customize the Youtube player, you need to make use of the Youtube API , and then you would have to program enough Javascript code that will be a long and truly extensive process as you can take a look in this article that explains how this process is done.

Fortunately there are software / plugins already ready for this, which makes life much easier, for example plugins like: PragmaticPlayerJs

This plugin allows you to use a custom player just by adding the following code below:

<div id="youtube-video"><!-- --></div>

<script>
$("#youtube-video").pPlayer({
    youtubeVideoId: "YE7VzlLtp-4",
    autoplay: 0,
    origin: "http://yoursite.com"
});
</script>

But of course you first have to install it in your script, calling it like for example we usually call a jQuery library, except in this case with the Plugin files. Example:

<link rel="stylesheet" type="text/css" href="../pplayer/assets/pplayer.css" />
<script type="text/javascript" src="../pplayer/js/jquery.pplayer.js"></script>
<!-- etc... -->

  

Note: It is also necessary to implement the jQuery Library for the plugin to work

Then, to customize the player in your own way, simply make changes to the CSS code of the Plugin and if you want, create your own icons and replace the respective images with your new custom icons, thus giving you the possibility to have a completely customized youtube player your way with just the implementation of this Plugin.

Here is an example of the end result of how it will look.

Once I needed to change, but I could not do much. By default youtube allows you to change the properties as below:

<p>
      <%
        options = '?'
        #options += '&autoplay=1' # 1: Inicia automatico ao carregar a pagina; 2: normal
        #options += '&controls=0' # 0: Esconde os controles de opção; 1: Mostra; 2: mostra, mas o flash player inicia depois do play
        #options += '&autohide=1' # 2(default): Esconde os controles apos um tempo; 1: Assim que iniciar; 0: Sempre visível
        options += '&showinfo=0' # Esconde o cabeçalho
        options += '&rel=0' # 0: Remover videos relacionados; 1(default): exibe
        options += '&theme=light' # Tema light ou dark
        options += '&modestbranding=1' # 1: Oculta o botão para ver no Youtube; 0(default): exibe.
        #options += '&color=white' # (Desativa modestbranding) white: Cor da linha branca; red: vermelha 
        options += '&cc_load_policy=1' # 0: Legendas, padrão do usuário; 1: Mostra as legendas
        #options += '&disablekb=1' # 1: Habilita teclas de atalho; 0(default): desabilita.
        #options += '&enablejsapi=1' # 1: Habilita Javascript API; 0(defaul): desabilita
        #options += '&start=' # Número: informa em qual momento (em um determinado segundo) o video deve iniciar.
        #options += '&end=' # Número: informa em qual momento (em um determinado segundo) o video deve parar.
        #options += '&fs=0' # 0: Desabilita o botão FullScreen; 1(default) habilita.
        options += '&iv_load_policy=3' # 3: Desabilita a exibição das anotações do video; 1(default) habilita
   #    # listType usado em conjunto com list e carrega uma lista de videos
   #    # '&list=parametro' # uma pesquisa; id do usuario do qual serão carregados os videos; id da playlist que será carregada.
   #    # Ex: &listType=playlist&list=PLC77007E23FF423C6
        #options += '&loop=1' # 1: o video sera repetido indefinidamente; 0(default): o video so e apresentado uma vez
        #options += '&rel=0&color1=0x006699&color2=0x54abd6&border=0'
        movie = '//www.youtube-nocookie.com/embed/JfeeGblHdlg'
        width='640'
        height='360'
      %>
      <iframe width="<%= width %>" height="<%= height %>" src="<%= movie %><%= options %>" frameborder="0"></iframe>
    </p>

In this case I'm putting together a string with options that I'll replace in the iframe.

Options such as changing the color of the player and buttons are no longer supported natively by youtube.

On the cannibal world site I saw that they have been able to customize a lot, but I think they used their own scripts. Suddenly doing a reverse engineering on their site to find out something.hehe:)