Comment superposer un bouton play sur une image de la vignette YouTube
dans un projet sur lequel je travaille, nous sommes en train de récupérer un tas de vidéos YouTube que notre équipe des médias a publiées dans une base de données afin que nous puissions les présenter comme du contenu connexe.
quelque chose que nous aimerions pouvoir faire est de superposer un bouton play sur les vignettes YouTube générées de sorte qu'il est plus évident que la vignette représente une vidéo qui peut être jouée.
je suis à la recherche de la meilleure façon de le faire - j'ai fait quelques recherches et n'est intéressé à faire cela, il est vraiment évident comment le faire ou je me démène juste pour trouver les bons termes de recherche.
Les solutions que j'ai trouvé pour l'instant:
- utilisez un conteneur div qui a une image d'arrière-plan play et baissez l'opacité de la vignette pour afficher le bouton play sur la vignette. Je ne suis pas un grand fan de cela à cause de la div supplémentaire et il ne semble pas fonctionner dans IE.
- traitement par lots les vignettes dans photoshop - en les modifiant pour qu'ils aient un bouton play. Ce serait quelque peu malheureux parce que nous tirons vers le bas des vidéos Tous les soirs - donc parfois, il y aurait des vidéos sans boutons de lecture.
- Modifier le processus d'importation pour générer dynamiquement de nouvelles vignettes avec le bouton play. Cela réglerait les deux questions susmentionnées, mais serait plus difficile à faire.
j'espérais pouvoir juste ajouter une classe à l'image et utiliser javascript et/ou CSS pour superposer image.
Si quelqu'un a quelques conseils sur ce, j'apprécierais vraiment.
html actuel (posté 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>
4 réponses
<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. Dans tous les cas, je ne pense pas que ce soit une bonne idée de post traiter les images pour ajouter le bouton play. Que faire si vous avez besoin de changer la conception du bouton par exemple?
si vous voulez centrer le bouton, une bonne façon de le faire est de mettre en haut et à 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;
}
une façon de le faire qui offre beaucoup de flexibilité sans markup HTML supplémentaire (contrairement à la plupart des solutions suggérées lorsque les gens s'interrogent sur les superpositions d'images) est d'utiliser le :after sélecteur CSS. En supposant qu'il y ait une div de la classe "video" 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;
}
Modifier 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 les autres codes que vous pourriez avoir, comme un div utilisé pour tenir une légende.
Ajouter un placez le sélecteur pour plus de snazz:
.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;
}
vous pouvez aussi 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)
Edit:
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):
Court, propre, entièrement responsive, sans supplément de HTML:
<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 jeu responsive (en fonction de la taille de la vignette) en ajoutant background-size.youtube:before les styles.
Par exemple:
.youtube:before {
background-size: 30%;
}