Gadget Lecteur Playlist Vidéos YouTube (TextList Custom)

Le gadget qui diffuse votre playlist de vidéos Youtube, sans avoir à créer une playlist sur YouTube. Hein ?!?

Présentation

Ce développement converti le gadget TextList en un lecteur multi-vidéos YouTube.

Quelles sont les différences avec les lecteurs intégrés proposés par défaut sur YouTube ?

• Vous ajoutez l'identifiant des vidéos YouTube directement dans les paramètres du gadget Liste
• Vous gérez l'ordre et le nombre de vidéos
• Des éléments peuvent venir se superposer sur la vidéo, tels que des menus déroulants
• Vous ne vous préoccupez pas des dimensions. Le lecteur s'adapte automatiquement à la taille de son conteneur.
• Vous personnalisez les paramètres du lecteur
• Vous définissez les conditions d'affichage (Types de pages, accueil, version mobile personnalisée)

Installation

Configurez les paramètres et suivez les instructions d'installation.

Paramètres du gadget	N° Identifiant ? Titre
Paramètres du lecteur	Démarrage automatique ? Vidéos similaires ? Afficher infos ? Répétition ? Commandes ? Annotations ? Activer le mode de confidentialité avancé ? Langue du blog ? Barre de progression Rouge (par défaut) Blanche Proportions du lecteur 1.77:1 [16/9] 1.33:1 [4/3] 2.76:1 2.55:1 2.39:1 2.35:1 2.20:1 1.85:1 1.66:1 [5/3] 1.60:1 [16/10] 1.56:1 [14/9] 1.25:1 [5/4] 1:1
Affichage du gadget ?	Articles Pages autonomes Index Archive Pages 404 Uniquement à la page d'accueil Appareils Uniquement la version web Uniquement la version mobile personnalisée Version web + Version mobile personnalisée

Le code du gadget

<b:widget id='TextList606' locked='false' mobile='no' title='Playlist vidéos' type='TextList' visible='true'>
  <b:includable id='main'>
      <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <!-- Gadget Playlist Vidéos YouTube (Widget TextList custom) - Blogger Config.
         Ref.: http://goo.gl/rJ8usx -->
    <h2><data:title/></h2>
    <div class='widget-content'>
      <div expr:id='"BCplayer" + data:widget.instanceId' />
      <b:include name='quickedit'/>
    </div>
    <script>
      var videolocale = "&amp;hl=<data:blog.locale/>";
      var videocontainer = "BCplayer<data:widget.instanceId/>";
      var videolist = "<b:loop index='i' values='data:items limit 200' var='videoId'><b:if cond='data:i == 1'><data:videoId/></b:if><b:if cond='data:i not in [0,1]'>,<data:videoId/></b:if></b:loop>";
      var firstvideo = "<b:eval expr='data:items[0]'/>";
      // <![CDATA[
        var       autoplay = 0;        // 0 (default) or 1
        var            rel = 1;        // 0 or 1 (default)
        var       showinfo = 1;        // 0 or 1 (default)
        var           loop = 0;        // 0 (default) or 1
        var        control = 1;        // 0 or 1 (default)
        var iv_load_policy = 1;        // 1 (default) or 3
        var          color = "red";    // "red" (default) or "white"
        var widgetBC = document.getElementById(videocontainer);
        var containerWidth;
        if (widgetBC.offsetWidth) { containerWidth = widgetBC.offsetWidth; }
        var containerHeight = (containerWidth/16)*9;
        var src = "https://www.youtube.com/embed/"+firstvideo+"?playlist="+videolist+"&amp;rel="+rel+"&amp;iv_load_policy="+iv_load_policy+"&amp;autoplay="+autoplay+"&amp;showinfo="+showinfo+"&amp;loop="+loop+"&amp;color="+color+"&amp;controls="+control+"&amp;wmode=opaque"+videolocale;
        var player = document.createElement('iframe');
            player.setAttribute('src', src);
            player.setAttribute('allowtransparency', 'true');
            player.setAttribute('scrolling', 'no');
            player.setAttribute('frameborder', '0');
            player.setAttribute('width', containerWidth);
            player.setAttribute('height', containerHeight);
        document.getElementById(videocontainer).appendChild(player);
      // ]]>
    </script>
  </b:includable>
</b:widget>

Où recopier ce code ?

Le code doit être ajouté dans l'éditeur HTML du modèle :

• Tableau de bord
• Modèle
• Modifier le code HTML

Recopiez le code au-dessus de :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'>

Lorsque le modèle sera enregistré, le gadget sera positionné juste au-dessus du gadget des articles. Pour le déplacer dans une autre colonne, rendez-vous dans le volet "Mise en page".

• Tableau de bord
• Mise en page
• Glisser/Déposer gadget "Playlist vidéos"

Le gadget apparaîtra sur le blog, lorsque vous aurez commencé à introduire des identifiants de vidéos YouTube dans les paramètres du gadgets (de préférence au moins 2 vidéos).

Pour retrouver l'identifiant d'une vidéo, rendez-vous sur une page de vidéo YouTube et recherchez l'url de partage.

• Sous la vidéo
• Partager
• Partager
• URL

Recopiez uniquement l'identifiant qui se trouve dans cette url.

• Note 1 : Le gadget ne vérifie pas le contenu des listes. Si la liste contient un élément qui n'est pas un identifiant (par exemple un texte), le lecteur ne fonctionnera pas correctement.
• Note 2 : Le player YouTube peut accueillir jusqu'à 200 vidéos.
• Note 3 : Les recommandations YouTube
  • La largeur minimum du conteneur doit être de 200 pixels si le lecteur n'est pas doté de la barre de commandes.
  • Si les commandes sont définies pour s'afficher, le conteneur doit être assez grand pour les afficher sans réduire la fenêtre d'affichage en deçà de sa taille minimale. La largeur recommandée du conteneur est de 480 pixels.
• Note 4 : Un élément de la liste peut contenir plusieurs identifiants. Ceux-ci doivent être séparés par une virgule.

Les lecteurs

• YouTube - Gadget Player
• YouTube - Gadget Playlist
• Deezer - Gadget Playlist