Gadget Lecteur Playlist Vidéos YouTube (TextList Custom)

Gadget Lecteur Playlist YouTube

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)


Le gadget entre l'entête et le reste du blog


Le gadget dans une colonne latérale


Installation

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

Paramètres du gadget
N° Identifiant ?
Titre
Paramètres du lecteur
Barre de progression
Proportions du lecteur
Affichage du gadget ?
Appareils

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 = "";
      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).

Ajouter des identifiants de vidéos YouTube dans les paramètres du gadget TextList

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.

Retrouver l'identifiant d'une vidéo YouTube
  • 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

Spotlight

Populaires cette semaine

Twitter : Bouton mentionner / Mention button