Video icon play in layer slider

Hey SphereEvenements,
Sorry for the late reply, the layerslider places these images from the file in the Private Content area. You could create a replacement file with the images you wish, or you could try this css with your own custom image.

.ls-noskin .ls-playvideo, .ls-noskin .ls-loading-container, .ls-noskin .ls-fullscreen {
    background-image: url(play-button.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Unfortunately, if you use the “video” layer in your slider the layerslider creates it’s own div to display the thumbnail that it grabs and placing a button over it, it is not using the YouTube iframe.

So your options are to use css to create a button you like, or use a custom image, or use the “HTML” layer to display the YouTube iframe code.

The layerslider does have a “no skin” mode, go to the Slider Settings, choose the Appearance tab. The first parameter will be the Skin, choose “no skin”

but this will not change the video element for the reasons above, but it does remove other styles you may like to remove.

While I was investigating I reverse-engineered some of the other skins css solutions for the video play button, you may find this helpful as a starting place for your custom css, if you choose that path.

.ls-playvideo {
	width: 50px;
	height: 50px;
	margin-left: -29px;
	margin-top: -29px;
	background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
	border: 2px solid rgba(255, 255, 255, 0.7);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.ls-playvideo:before {
	position: absolute;
	top: 16px;
	left: 20px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 14px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	content: "";
}

.ls-playvideo:hover:before{
	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

.ls-playvideo:hover {
	background: rgba(0,0,0,1);
	border: 2px solid rgba(255, 255, 255, 1);
}

Best regards,
Mike

Hi,
When I use the HTML layer the video shows the YouTube iframe, please see the example link in the Private Content area.
This slider is using the default skin, no settings were changed.

Best regards,
Mike

Hi,
It is the same html code, I replaced mine with yours like this:

Please check the example page below again.

Best regards,
Mike

Hi,
Please include an admin login in the Private Content area so we can take a look, or export your slider and upload to DropBox so we can check.

Best regards,
Mike