Aaron, I love your creativity in customizing the play button, but the drupal icon is not my favourite. Can someone with graphic design skills please edit me a button that erases those cute little faces?

thanks

CommentFileSizeAuthor
#15 player-play.png11.38 KBnicknickoli
#5 emvideo-play.png4.04 KBmurz
#4 emvideo-play.png4.13 KBmurz
#1 emvideo-play.png4.21 KBmairav
emvideo-play.png6.6 KBcarole

Comments

mairav’s picture

mairav commented
StatusFileSize
new emvideo-play.png4.21 KB

I don't know if I'm blind, but I couldn't find where do I configure if the play button is enabled or not.
It's checked in en/admin/content/emfield but the play button overlay doesn't appear.

@carole, I attach you the emvideo-play without the drupal face.

c-c-m’s picture

c-c-m commented

Is it possible to resize/change that icon? (specially resizing it)

aaron’s picture

aaron commented
Status: Active » Fixed

you'll need to change the css to display the image you desire.

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
StatusFileSize
new emvideo-play.png4.13 KB

Youtube variant of emvideo-play.png

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
StatusFileSize
new emvideo-play.png4.04 KB

Variant with cleared left corner

skessler’s picture

skessler
He/Him
Location Denver
commented

What is the proper way to apply this override?

Thanks,
Steve

carole’s picture

carole commented

Thanks, Mairav and Murz. They look great.

Steve, put the image in your modules/emfield/contrib/emvideo folder.

c-c-m, I believe you can resize it in a graphics program and put it in the above folder - should work, no css required.

Mairav, I remember looking everywhere to enable a play button in the new video player flashvideo recommends (I forget the name at the moment), but I don't recall having to enable the play button for emfield. I don't see it in my thumbnails, I do see it at bigger resolutions. Perhaps it's a size issue?

skessler’s picture

skessler
He/Him
Location Denver
commented

OK, I guess what I am asking is there way as it stands now to override this with the theme so that when the module is updated this file is not an issue?

Thanks,
Steve

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

seddonym’s picture

seddonym commented

You can do this with css in your theme folder. Place the thumbnail in the images subdirectory of your theme, then in style.css:

.emvideo-thumbnail-replacement span { background: url(images/emvideo-play-custom.png) no-repeat; }

If you need to use a different size thumbnail then you can do as follows:

.emvideo-thumbnail-replacement span {
  background: url(images/emvideo-play-custom.png) no-repeat;
  /*The image should have the mouseover image to the right and the normal image to the left*/
  height: [HEIGHT OF YOUR IMAGE FILE];
  width: [HALF THE WIDTH OF YOUR IMAGE FILE];
  /*Reposition accordingly*/
  left:49px;
  top:23px;
}
.emvideo-thumbnail-replacement span:hover {
  background-position: -[HALF THE WIDTH OF YOUR IMAGE FILE - NB NEGATIVE NUMBER] 0;
}
ahkiam’s picture

ahkiam commented

thanks seddonym - that css helper also saved me a tremendous amount of time

EvanLovely’s picture

EvanLovely commented

Thanks for the icons!

verta’s picture

verta commented
Version: 6.x-1.0-beta1 » 6.x-3.x-dev
Category: support » feature
Status: Closed (fixed) » Active

Requesting these images to be included in the dev release and their presence and this CSS documented in the readme?

It's the first thing people ask when they see the video, 'Can you get rid of that funny watermark?'

nicknickoli’s picture

nicknickoli commented
StatusFileSize
new player-play.png11.38 KB

Here's a png-24 duplicated from the designer's work, with on & off states. Thanks