Is it possible to add an icon on the thumbnail that will indicate this image is a link to a video (like in Facebook, we see a play icon on video thumbs) ?

Members fund testing for the Drupal project. Drupal Association Learn more


jec006’s picture

This is a great idea, I'll try to work it in as soon as possible. Thanks

Sinan Erdem’s picture

Currently I can achieve this in two ways:

  • Using ImageCache Actions, I overlay an image onto thumbnail
  • Using thumbnail in Views, I print a new field "custom text" and use an image url. This way I can show an image under the thumbnail, and put this image onto thumb by css
mototribe’s picture

I would love to see this feature too. I would prefer the css option, gives it a lot more flexibility to make changes. Do you have some sample code?

wbobeirne’s picture

Status: Active » Needs work
6.07 KB

Alright, I've got something working, but it's not quite perfect yet. It adds a few fields to the field formatter form that lets you add a div on top of the img, and optionally specify an image right there for it:

And in some cases, works quite well!

Also allowing you to specify the image in CSS, and add things like a different image for hovering etc.

But in other cases, does not work very well...

The top part of the image is if I set the video field to position: relative; and float: left; The bottom is what the field defaults to. This is because I'm using width and height: 100%; to get the div's dimensions. I was trying to do this Javascriptless, and if anyone has any suggestions, I'm all ears. Otherwise, this shouldn't be hard to do with Javascript. In the mean time, I'm attaching the patch for what I've got so far.

Anonymous’s picture

By the way, I love the idea of the custom image directly in the field formatter! If there was a way to maybe resize the image used to a maximum dimension or something (image style), that would help prevent the scenario in
That being said, I've actually implemented this kind of overlay on multiple sites.

You'll notice on the home page, ( under "Recent articles", that the video thumbs have the play button, and regular images do not. Same trick as the other pages but I used "Views If Empty" to show the image if there's no video. Video Embed Field + Views If Empty ( = awesome sauce!

Here's the HTML used for CFAA:

<div class="video-wrapper">
<a href="[PAGE-URL]" title="[PAGE-TITLE]">
<div class="play"></div>
<img src="[IMAGE-URL]" alt=""></a>

And the CSS for CFAA:

.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
.video-wrapper .play {
position: absolute;
width: 100%;
height: 75%;
background: url(../images/resources-play-overlay.png) no-repeat center center;
display: block;
z-index: 100;
.video-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;

The CFAA website is a responsive design, so that's what I have that extra bit for the "img". Let me know if anyone has questions, and I hope this helps!

Got to give credit to the two websites where I gleaned this from (and implemented for the actual video players of course!):

bnash2501’s picture

Rerolled the patch to work with newest 7.x-2.x.

wbobeirne’s picture

Status: Needs work » Needs review

Patch applies cleanly, thanks for updating it. After looking back at this, I feel like I was too hand-holdy with the inline styles. It should ultimately be up to the theme on how to handle that, not the module. I won't roll another patch, but it might be a good idea to cut out the styles that I added in video_embed_field_field_formatter_view.