change custom play icon

[Hadewych]

Hi,

I'd like to change the custom play icon for a HTML5-video (because the text on my video is white, and the button also) in another svg-file (dark play button). But I don't know how to do it. Is it possible to help me a bit? :)

[arminunruh]

go to lay options → scroll down to "appearance" section and here it is:

[Hadewych]

@arminunruh THANKS!!

[DGXY]

when I upload an svg file, it fills almost the entire video's area. Is it possible to adjust the icon size somehow, @arminunruh ? When using an image its properly sized, but kind of unsharp. Thanks in advance!

[arminunruh]

hello!

so make sure you have updated to the latest version of lay theme

the svg used as the custom play icon just has the size of the svg that you upload

but you can use custom css to change the size:

lay options → custom css & html → custom css:

img.html5video-customplayicon{
width: 200px!important;
}

[Nzagamba]

just trying to upload my own video play icon and have the same issue with svg. I set the css to:

.lay-vimeo-playicon-custom img {
  width: 200px !important;
}

but the svg is still scaled up to the edge of the video.
with png, I could set the image to 200x200px, but then the resolution of the icon looks pixel on retina displays

what am I missing?

[arminunruh]

hey!

i think the svg itself needs to contain a width:

https://laythemeforum.com/topic/5190/svg-cursors-fix

basically, if you open the svg file with a texteditor, the svg tag needs to look like:

<svg height="20" width="20">
...
</svg>

then the play icon is used on the video in that exact size by default.
if that wont work you can post your website address here and i will take a look

[Nzagamba]

Thanks Armin, my svg hav a size set already. and today suddently it worked, I think it was a cache issue of an old svg... glad it works now! Beautiful!

[Nzagamba]

Other question related to custom video button:
I am embedding videos in element grid here, using custom play button. I noticed an issue in chrome, that the sound is muted, even though in Laytheme I did not click the settings "mute". In safari, the sound seems to work. Also I tried to use the regular vimeo play button, and the sound also played in safari. Any tipps on how to solve this one?

[arminunruh]

chrome does not support unmuting a iframe vimeo embed through a custom UI which the lay theme vimeo controls is.

nothing i can do here, its a browser restriction. you would need to use the default vimeo controls and disable the "lay custom controls" if you want to be able to unmute the video.