Мобильная версияIn a project I'm working on, we're pulling over a bunch of YouTube videos that our media team has published into a database so we can present them as related content.
Something we'd like to be able to do is overlay a play button on top of the generated YouTube thumbnails so it's more obvious that the thumbnail represents a video that can be played.
I'm looking for the best way to accomplish this - I've done some searching and either no one is interested in doing this, it's really obvious how to do it or I'm just struggling to come up with the right search terms.
The ways I've come up with so far are:
- Use a container div that has a play background image and lower the opacity of the thumbnail to display the play button over the thumbnail. I'm not a huge fan of this because of the extra div and it doesn't seem to work in IE.
- Batch process the thumbnails in photoshop - altering them so they have a play button. This would be somewhat unfortunate because we're pulling down videos every night - so sometime there would be some videos without play buttons.
- Modify the import process to dynamically generate new thumbnails with the play button. This would fix both of the above issues, but would be more difficult to do.
I was hoping to be able to just add a class to the image and use javascript and/or CSS to overlay the image.
If anyone has some advice on this, I'd really appreciate it.
Current html (posted by OP in comments):
[*]
{ video title here }
Источник: https://stackoverflow.com/questions/512 ... nail-image
