Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #1227517

    Hi Enfold team !
    I have integrated a video on a page :
    I’d like to have the basic youtube icons hover my video in layerslider (with title on top and red or black triangle in the middle).
    I don’t want this little white triangle in a white circle to start the video…
    Apparently when we add a video in a layer slider, it’s this icon by default but I just want to have default youtube icons. How can I change this please ?
    Thanks for your help !


    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,


    Thank you Mike. Is it possible to deactivate layerslider skin in order to show the default youtube skin (with logo, title, progress bar…) ?
    Best regards,


    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: "";
    	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,


    Thank you Mike. Actually, I have found this option “no skin” but it doesn’t change the video skin. Even if I use the “HTML” layer to display the YouTube iframe code, it go back to the layerslider skin…
    Thanks for your investigations.
    Best regards,


    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,


    Hi Mike,
    Could you give me the HTML code please ?
    I’ve retested and it doesn’t work. As you can see again on this page (private data), I’ve added a new video (at the left “a bee” :)) in HTML layer with the youtube code and I’ve always the layerslider iframe, not the youtube iframe.

    I’ve added this iframe from youtube :
    <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Thanks for your help,


    It is the same html code, I replaced mine with yours like this:
    Please check the example page below again.

    Best regards,


    ? I don’t understand why you have the youtube iframe and not me (with the same code !) !…


    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,


    I think that I’ve found the solution !

    In your slider settings / video section, have you let “automatically play media” ?
    I don’t want to play automatically media, but if I want to keep youtube iframe, I have to let this setting “automatically play media” on, and change youtube iframe code with an autoplay = “0” like this :

    <iframe width=”560″ height=”315″ src=”; frameborder=”0″ allow=”accelerometer; autoplay=”0″; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>



    arf no it doesn’t work…


    It works on firefox but not on chrome !


    Yes it really works even on chrome ! It was because I was on a preview admin page :) !!!


    That looks like it is the cause, but you can only control the autoplay with the layerslider option, it doesn’t have an option to override. The layerslider adds the “autoplay” even if you remove it from the iframe code before you publish or after the page load with jQuery.
    We seem to be at road block for this customization, I don’t believe this will work without re-writing the layerslider script, which is quite complicated.

    Best regards,

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.