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) ?

CommentFileSizeAuthor
#6 video_embed_field-thumbnail-icon01591430-6.patch3.29 KBbnash2501
#4 video_embed_field-thumbnail-icon01591430-4.patch6.07 KBwbobeirne

Comments

jec006’s picture

jec006 commented

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

Sinan Erdem’s picture

Sinan Erdem commented

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

mototribe commented

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

wbobeirne commented
Status: Active » Needs work
StatusFileSize
new video_embed_field-thumbnail-icon01591430-4.patch6.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:

http://cl.ly/image/073M2i3U2L29

And in some cases, works quite well!

http://cl.ly/image/1c341A0O0a2Y

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

http://cl.ly/image/3q3h3p1j0X3a

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

http://cl.ly/image/0n1745190G0v

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

Anonymous (not verified) commented

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 http://cl.ly/image/0n1745190G0v.
That being said, I've actually implemented this kind of overlay on multiple sites.

You'll notice on the home page, (http://nationalnursingrehab.com/site/) 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 (http://drupal.org/project/views_ifempty) = 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>
</div>

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!

Sources:
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

bnash2501 commented
StatusFileSize
new video_embed_field-thumbnail-icon01591430-6.patch3.29 KB

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

wbobeirne’s picture

wbobeirne commented
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.