everyone, could someone tell me how this effect was done

Hi everyone, could someone tell me how this effect was done with this YouTube player? (Screenshot). I'm trying to do the same embed style. Upon hovering, it only starts and stops. It doesn't even have a link to YouTube itself. Also, they were able to hide an image behind it. My client wants a style like this. Thanks much!

  • Tyler Postle
    • CGO

    Hey Mick,

    Hope you're doing well today and thanks for your question!

    In the screenshot it looks like they just positioned a background on the page and placed it in a way that gives it that nice visual effect.

    Do you mind providing a link to that site so we can take a look and see what else may be going on there? Then we can provide more efficient assistance here :slight_smile:

    Look forward to hearing back.

    All the best,
    Tyler

  • Mick
    • The Incredible Code Injector

    Haven't been here in awhile, it used to be that we'd select 'I have another question' in the drop down menu. That option isn't there anymore and now it has 'I have a billing or account question.' Should I use that one?

  • Tyler Postle
    • CGO

    Hey Mick,

    Sorry about that. it should be right under "I have a billing question", it could have been cut off. Either way, thanks for posting the link!

    Okay, so they just tailored the options of their embed by the looks of it, you can do this straight from YouTube then paste in the embed code into your site.

    I have attached a screenshot example.

    The code below is associated with the mug that is behind the video a bit.

    .page-template-template-home-php #right-call-to-action #home-mug {
        left: -121px;
        position: absolute;
        top: 50px;
        z-index: 0;
    }

    As you can see, they have pushed it to the left 121px so it will overlap the video. Since they wanted to make sure that it would go behind the video they gave it a z-index of "0".

    a low z-index means it will go behind anything with a higher z-index, this is how you can make control which elements come to the front and which ones fall back.

    The coffee bags is just another image that is placed beside the embed. they are 2 separate columns.

    Hope that helps Mick! Let us know if you have any further questions :slight_smile:

    All the best,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.