DéveloppementsReconversion de gadgets

Gadget Lecteur Vidéos YouTube


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Network Gadget Gadget Version Template Version
Le gadget Blogger "Liste de liens", transformé en un gadget "Liste de vidéos YouTube".
YouTube
LinkList
1
1
2
Gadget Lecteur Vidéos YouTube
Il ne s'agit pas d'un nouveau gadget, mais d'un remaniement du gadget Liste de liens que nous allons transformer en un lecteur vidéos qui permettra de lire une liste de vidéos YouTube.

Présentation du gadget "liste de liens" après modification



Retravaillé complètement par rapport à la première version que j'avais développé en 2011, pour cette nouvelle mise à jour, j'ai ajouté un certain nombre de points :

  • Un design YouTube.
  • La largeur du gadget s'adapte en fonction de la colonne.
  • Plus de paramètres : Démarrage automatique, suggestions, mode de confidentialité, HTTPS, etc
  • Affichage automatique de la première vidéo de la liste.
  • Update juillet 2013 : Possibilité d'ajouter le nouveau bouton d'inscription à une chaîne.
  • etc.


Haut de page


Configuration du code du gadget

Choisissez d'abord les paramètres dans ce tableau. Ensuite, recopiez les codes ci-dessous aux endroits mentionnés.

N° d'identification du gadget Choisir entre 1 et 999. Si vous avez déjà des gadgets "liste de liens" sur votre blog, veillez à ne pas choisir le même numéro.
Nom du gadget
Dimensions de la fenêtre vidéo Largeur px Hauteur px
Suggestions à la fin de la lecture
Démarrage automatique Si oui, la vidéo démarrera lorsqu'elle sera sélectionnée dans la liste.
Votre chaîne YouTube Le nom d'une chaîne permettra d'afficher un lien et le bouton d'inscription sur le gadget.
Vous trouverez le nom dans la barre d'adresse de votre navigateur lorsque vous visiterez votre chaine.
[non-requis]
Condition d'affichage


Haut de page


Le code du gadget

<b:widget id='LinkList601' locked='false' title='Vidéos' type='LinkList'>
  <b:includable id='main'>
  <div class='gadgetvideoplayer'>
    <h2 class='player-title'>
      <b:if cond='data:title'>
        <data:title/>
      </b:if>
    </h2>
    <div class='widget-video'>
      <b:loop index='video' values='data:links' var='videoLink'>
        <b:if cond='data:video == 0'>
          <div class='video-player'>
            <iframe allowfullscreen='' expr:name='&quot;video&quot; + data:widget.instanceId' expr:src='data:videoLink.target + &quot;?rel=0&amp;amp;autoplay=0&quot;' frameborder='0' marginheight='0' marginwidth='0'/>
          </div>
        </b:if>
      </b:loop>
      <div class='video-list'>
        <ul>
          <b:loop values='data:links' var='videoList'>
            <li><a expr:href='data:videoList.target + &quot;?rel=0&amp;amp;autoplay=1&quot;' expr:target='&quot;video&quot; + data:widget.instanceId'><data:videoList.name/></a></li>
          </b:loop>
        </ul>
      </div>
    </div>
    <div class='video-footer'>
      <span class='footer-right'>
        <span class='item-control blog-admin'>
          <a expr:href='&quot;//www.blogger.com/rearrange?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;widgetType=&quot; + data:widget.type + &quot;&amp;amp;widgetId=&quot; + data:widget.instanceId + &quot;&amp;amp;action=editWidget&amp;amp;sectionId=&quot; + data:widget.sectionId' expr:onclick='&quot;return _WidgetManager._PopupConfig(document.getElementById(&apos;&quot; + data:widget.instanceId + &quot;&apos;));&quot;' expr:target='&quot;config&quot; + data:widget.instanceId' expr:title='data:edit-link'><data:edit-link/></a>
          <a href='https://bloggercode-blogconnexion.blogspot.com/2011/01/widget-lecteur-videos-youtube.html' target='_blank' title='Tutoriel'>Tutoriel</a>
        </span>
      </span>
    </div>
  </div>
  </b:includable>
</b:widget>


Où copier ce code ?
Tableau de bordModèleModifier le code HTML


Emplacement A copier juste avant
Au-dessus du gadget blog1<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>


Si vous avez suivi toutes les étapes, le gadget est à présent visible sur votre blog, dans la colonne centrale juste au-dessus des articles.

Si l'emplacement ne vous convient pas, rendez-vous dans le tableau de bord (onglet Mise en page) et déplacez-le à votre convenance.


Déplacer le gadget vidéos


Haut de page


L'habillage du gadget

Pour que le gadget soit "présentable", il faut ajouter un style CSS :

.gadgetvideoplayer {
  position: relative;
}

.subscribeYT {
  position: absolute;
  top: 4px;
  right: 10px;
}

.video-player, .video-player iframe {
  width: 280px; /* LARGEUR VIDEO */
}

.video-player, .video-player iframe, .video-list {
  height: 225px; /* HAUTEUR VIDEO */
}

h2.player-title {
  display: block !important;
  background: rgb(27, 27, 27) url(https://www.google.com/uds/css/youtube-logo-55x24.png) no-repeat 10px 5px;
  padding: 0px 0px 0px 75px;
  margin: 0px;
  color: #fff;
  height: 34px;
  line-height: 34px;
  font-size: 15px;
  overflow: hidden;
  font-weight: inherit;
}

.widget-video {
  display: block;
  width: 100%;
  background: rgb(43, 43, 43);
  overflow: hidden;
}

.video-player {
  float: left;
  overflow: hidden;
}

.video-player iframe {}

.video-list {
  width: auto;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.video-list:hover {
  overflow-y: auto;
}

.video-list ul {
  display: block !important;
  padding: 0px !important;
  margin: 0px !important;
  list-style: none !important;
  background: rgb(43, 43, 43) !important;
  border: none !important;
}

.video-list ul li {
  padding: 0px 17px 0px 0px !important;
  margin: 0px !important;
  list-style: none !important;
  display: block !important;
  overflow: hidden !important;
  border-top: 1px solid rgb(57, 57, 57);
  border-bottom: 1px solid rgb(29, 29, 29);
  border-left: none !important;
  border-right: none !important;
  float: none !important;
}

.video-list:hover ul li {
  padding: 0px 0px 0px 0px !important;
}

.video-list ul li a:link, .video-list ul li a:visited {
  display: block !important;
  padding: 5px 10px 5px 10px;
  margin: 0px !important;
  font-weight: bold !important;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none;
  border: none !important;
}

.video-list ul li a:hover {
  background: rgb(53, 53, 53) !important;
}

.video-list ul li a:active, .video-list ul li a:focus {
  background: rgb(79, 79, 79) !important;
}

.video-footer {
  display: block;
  overflow: hidden;
  background: rgb(27, 27, 27);
  height: 27px;
  line-height: 27px;
  padding: 0 10px 0 3px;
}

.video-footer a:link, .video-footer a:visited {
  color: rgb(153, 153, 153);
  font-size: 11px;
  margin-left: 7px;
}

.video-footer a:hover, .video-footer a:focus, .video-footer a:active {
  color: #fff !important;
  text-decoration: underline !important;
}

.footer-left {
  float: left;
}

.footer-right {
  float: right;
}


Le CSS est a ajouter dans l'éditeur de modèles :
Tableau de bordModèlePersonnaliserAvancéAjouter fichier CSS


Si le gadget ne s'affiche pas correctement dans l'aperçu, vous pouvez affiner en conséquence les valeurs des dimensions de la fenêtre vidéo.


Calibrer la taille de la fenêtre de la vidéo


A noter que le gadget n'apparaîtra que si il contient au moins un lien.


Haut de page


Les paramètres du gadget

Étant donné qu'il s'agit d'un gadget "liste de liens" transformé, les paramètres sont identiques à ceux du gadget "liste de liens (logique).

Tous les paramètres ont été conservés. Titre, nombre de liens à afficher, triage, nom et url.


Les paramètres du gadget


Haut de page


Les url des vidéos

Afin que votre nouveau joujou fonctionne parfaitement, il faut, dés à présent ajouter les bons liens dans le gadget. Le générateur ci-dessous va vous aider.

Identifiant de la vidéo
Utiliser HTTPS
Activer le mode de confidentialité avancé
Prévisualisation
L'url de la vidéo à ajouter dans votre liste
https://www.youtube-nocookie.com/embed/fXlQ7LaztBc
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton partager [Share button]
Populaire
DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire