Completely customize the Youtube player

Question

I’m on this mission and I’ve seen some questions but none of them suppressed my need.

My goal was to have only the screen and video, and fully customize the player Youtube buttons pause, stop, volume, fullscreen, control all these features.
I noticed that there are some free tools that do this, however there are few changes.

How can I make these changes and completely customize the Youtube video player?

Answer 1

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

Fortunately there is software/plugins already ready for this, which makes life a lot easier, such as 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 first you have to install it in your script, calling it as for example we usually call a jQuery library, only 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: Implementation of the jQuery Library is also required for the plugin to work

Then, to customize the player in your own way, just make the changes in 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 of having a youtube player completely customized in your own way only with the implementation of this Plugin.

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

Answer 2

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 am mounting a string with options that I will replace in iframe.

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

On the cannibal world website I saw that they were able to customize a lot, but I think they used some scripts of their own. Suddenly doing a reverse engineering on their website to discover something.hehe :)