web-dev-qa-db-fra.com

Comment superposer un bouton de lecture sur une image miniature YouTube

Dans un projet sur lequel je travaille, nous récupérons un tas de vidéos YouTube que notre équipe multimédia a publiées dans une base de données afin que nous puissions les présenter en tant que contenu connexe.

Nous aimerions pouvoir superposer un bouton de lecture au-dessus des miniatures YouTube générées, il est donc plus évident que la miniature représente une vidéo qui peut être lue.

Je cherche le meilleur moyen d'y parvenir - j'ai fait quelques recherches et soit personne n'est intéressé à le faire, il est vraiment évident de savoir comment le faire, soit j'ai du mal à trouver les bons termes de recherche.

Les moyens que j'ai trouvé jusqu'à présent sont les suivants:

  1. Utilisez un conteneur contenant une image d'arrière-plan de lecture et réduisez l'opacité de la miniature pour afficher le bouton de lecture sur la miniature. Je ne suis pas un grand fan de cela à cause du div supplémentaire et cela ne semble pas fonctionner dans IE.
  2. Traitez les vignettes par lots dans Photoshop - en les modifiant pour qu'elles aient un bouton de lecture. Ce serait quelque peu regrettable car nous retirons des vidéos tous les soirs - il y aurait donc parfois des vidéos sans boutons de lecture.
  3. Modifiez le processus d'importation pour générer dynamiquement de nouvelles vignettes avec le bouton de lecture. Cela résoudrait les deux problèmes ci-dessus, mais serait plus difficile à faire.

J'espérais pouvoir simplement ajouter une classe à l'image et utiliser javascript et/ou CSS pour superposer l'image.

Si quelqu'un a des conseils à ce sujet, je l'apprécierais vraiment.

HTML actuel (publié par OP dans les commentaires):

<li>
    <a 
        class="youtube" 
        title="{ video id here }" 
        href="youtube.com/watch?v={video id here}">
             <img 
                 src="i3.ytimg.com/vi{ video id here }/default.jpg" 
                 alt="{ video title here }" />
    </a><br /> 
    <a 
        class="youtube" 
        title="{vide id here }" 
        href="youtube.com/watch?v={ video id here }">
             { video title here }
    </a>
</li>
jquerycssyoutubephotoshop
28
someoneinomaha
<div class="video">
    <img src="thumbnail..." />
    <a href="#">link to video</a>
</div>

css

.video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 20px;
   left: 20px;
}

Je ferais quelque chose comme ça. En tout cas, je ne pense pas que ce soit une bonne idée de post-traiter les images pour ajouter le bouton de lecture. Et si vous devez changer la conception du bouton par exemple?

Si vous souhaitez centrer le bouton, une bonne façon de le faire est de définir le haut et la gauche à 50%, puis en ajoutant des marges négatives égales à la moitié de la taille du bouton:

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 -20px;
}
37
Robin

Une façon de le faire qui offre beaucoup de flexibilité sans balisage HTML supplémentaire (contrairement à la plupart des solutions suggérées lorsque les gens posent des questions sur les superpositions d'images) est d'utiliser le :after Sélecteur CSS. En supposant qu'il y ait un div de la classe "vidéo" autour de chaque image, quelque chose comme:

.video:after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 120px;
    z-index: 100;
    background: transparent url(play.png) no-repeat center;
    pointer-events: none;
}

Modifiez les valeurs de width, height et z-index selon les besoins, selon le reste de votre feuille de style. Cela fonctionne bien sans interférer avec d'autres codes que vous pourriez avoir, comme un div utilisé pour contenir une légende.

Ajoutez un sélecteur de vol stationnaire pour un éclat supplémentaire:

.video:hover:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    height: 120px; 
    z-index: 100; 
    background: transparent url(play_highlight.png) no-repeat center; 
    pointer-events: none; 
}
18
otravers

Court, propre, entièrement réactif, sans HTML supplémentaire:

<a class="youtube" href="http://youtube.com/watch?v={video id here}">
    <img src="http://i3.ytimg.com/vi/{video id here}/default.jpg" alt="{ video title here }" />
</a>

CSS:

.youtube {
    position: relative;
    display: inline-block;
}
.youtube:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent url({play icon url here}) center center no-repeat;
}

PS: vous pouvez même rendre la taille de l'icône de lecture sensible (en fonction de la taille de la vignette) en ajoutant background-size au .youtube:before modes.

Par exemple:

.youtube:before {
    background-size: 30%;
}
4
Dima L.

Vous pouvez également utiliser un service

http://halgatewood.com/youtube/

Comme ceci: http://halgatewood.com/youtube/i/youtube_id.jpg (redirige vers Amazon)

Par exemple: http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg (redirige vers Amazon)

Modifier:

le service a été supprimé, je suppose que trop de gens l'ont bombardé :) maintenant c'est sur github

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/ (lien brisé) https://github.com/halgatewood/youtube -thumbnail-enhancer

Voici un autre service qui fait la même chose (comme suggéré par muktesh patel):

http://www.giikers.com/iwc

4
Timo Huovinen