MOD Ajouter vidéo

Aujourd’hui, un MOD* pour ajouter une vidéo en fond de page (background) précisément sur la page de « login » de Wordpress.
La vidéo provient de Youtude et je la veut en lecture pleine page, lancement immédiat et répété !

Impossible de trouver un plugin qui permette cela ou du moins, je n’en n’ai pas trouvé !
Alors je vous propose un petit module pour modifier un fichier d’origine.

Oui je sais, ce n’est pas bien de faire cela car après le fichier n’est plus considéré comme étant d’origine et on perd les modification à chaque nouvelle version… Mais je n’ai pas trouvé mieux pour le moment.

Donc nous allons modifier le fichier ./wp-login.php

Dans ce fichier, repérez la ligne :

<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
Langage du code : HTML, XML (
xml
)

Ajouter :

<span class="php"><span class="hljs-meta"><?php</span>
<span class="hljs-comment">/*
* With many help of :
* - https://www.labnol.org/internet/embed-mute-youtube-video/29149/
* - https://stackoverflow.com/questions/19410789/youtube-player-api-with-loop
* - https://developers.google.com/youtube/iframe_api_reference#Functions
* - https://developers.google.com/youtube/player_parameters#showinfo
*/</span>
<span class="hljs-meta">?></span></span>

<span class="hljs-comment"><!-- 1. The <iframe> (and video player) will replace this <div> tag. --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"player"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"position: fixed; z-index: -99; width: 100%; height: 100%"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span>></span>
<span class="javascript">
  <span class="hljs-comment">// 2. This code loads the IFrame Player API code asynchronously.</span>
  <span class="hljs-keyword">var</span> tag = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'script'</span>);

  tag.src = <span class="hljs-string">"https://www.youtube.com/iframe_api"</span>;
  <span class="hljs-keyword">var</span> firstScriptTag = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">'script'</span>)[<span class="hljs-number">0</span>];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  <span class="hljs-comment">// 3. This function creates an <iframe> (and YouTube player)</span>
  <span class="hljs-comment">//    after the API code downloads.</span>
  <span class="hljs-keyword">var</span> player;
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onYouTubeIframeAPIReady</span>(<span class="hljs-params"></span>) </span>{
    player = <span class="hljs-keyword">new</span> YT.Player(<span class="hljs-string">'player'</span>, {
        <span class="hljs-attr">videoId</span>: <span class="hljs-string">'Yus9j-Ulvcs'</span>,
        <span class="hljs-attr">playerVars</span>: {
            <span class="hljs-string">'autoplay'</span>: <span class="hljs-number">1</span>,
            <span class="hljs-string">'controls'</span>: <span class="hljs-number">0</span>,
            <span class="hljs-string">'showinfo'</span> : <span class="hljs-number">0</span>,
            <span class="hljs-string">'playlist'</span> : <span class="hljs-string">'Yus9j-Ulvcs'</span>,
            <span class="hljs-string">'loop'</span> : <span class="hljs-number">1</span>,
            },
        <span class="hljs-attr">events</span>: {
            <span class="hljs-string">'onReady'</span>: onPlayerReady
            }
        });
      }

  <span class="hljs-comment">// 4. The API will call this function when the video player is ready.</span>
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onPlayerReady</span>(<span class="hljs-params">event</span>) </span>{
    event.target.mute();
  }
</span>
<span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Langage du code : HTML, XML (
xml
)

Notez que j’ai mentionné mes sources notement pour la lecture automatique et répété d’une seule vidéo en mode automatique ! => Il fallait créer une playlist avec deux fois la même vidéo dedans…

Recherchez :

  <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"login"</span>></span>

        <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"<?php echo esc_url( $login_header_url ); ?>"</span>></span>
<span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> $login_header_text; <span class="hljs-meta">?></span></span>
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
Langage du code : HTML, XML (
xml
)

Remplacer par :

<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"login"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sub_panel"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"<?php echo esc_url( $login_header_url ); ?>"</span>></span>
<span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> $login_header_text; <span class="hljs-meta">?></span></span>
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
Langage du code : HTML, XML (
xml
)

Notez l’ajout d’une balise DIV

Recherchez :

  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-comment">// End of <div id="login"> <span class="hljs-meta">?></span></span></span>
Langage du code : HTML, XML (
xml
)

Remplacer par :

  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-comment">// End of <div id="login"> <span class="hljs-meta">?></span></span></span>
Langage du code : HTML, XML (
xml
)

Notez la fermeture de la précédente balise DIV que j’avais ajouter.

Voilà, c’est tout.