> For the complete documentation index, see [llms.txt](https://help.synamate.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.synamate.com/docs/how-to-tutorials/youtube-play-button-on-hosted-videos.md).

# Youtube Play Button on Hosted Videos

How to make the hosted video play button youtube styled

#### By Default the hosted video play button will look like the below image

<figure><img src="https://2305634809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwac2MfNhMo5Z7EKQV1N%2Fuploads%2FtlZ1Y41avCQRsRQrT3LF%2FHosted%20Video%20Original%20Play%20Button.png?alt=media&amp;token=234977d2-7885-4ceb-8874-2940e49fb3c5" alt="Hosted video&#x27;s original play button"><figcaption></figcaption></figure>

#### In order to make the video play button youtube styles you need to insert a small and simple copy paste custom code.

**Step 1:** Edit the Funnel/website step you have hosted video on and Click on Settings and go to Custom CSS as shown below

<figure><img src="https://2305634809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwac2MfNhMo5Z7EKQV1N%2Fuploads%2FkU5nnfUor20xVFXUkodO%2FEdit%20Hosted%20Video%20Funnel%3AWebsite%20Page.png?alt=media&amp;token=e2f22c8c-ec01-480d-8014-cbb9bc7d77d9" alt="Inserting css code in page builder"><figcaption></figcaption></figure>

**Step 2:** Now in the popup you'll get insert the code from below (Copy paste it) and click on save.

```css
.hosted-video-thumbnail::after {
    background-color: red !important;
    line-height: 1.8em !important;
    height: 1.9em !important;
    border-radius: 0.4em !important;
}
```

{% hint style="warning" %}
Don't forget to click save on top right corner of funnel builder.
{% endhint %}

<figure><img src="https://2305634809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwac2MfNhMo5Z7EKQV1N%2Fuploads%2FO1UBGhkJAEI1CjOI27m3%2FCopy%20Paste%20Css%20Code%20for%20Hosted%20Video.png?alt=media&amp;token=7a5b0ad1-4e6f-4234-ba1b-43ceda658298" alt="Inserting simple css code in CSS editor of page builder in synamate"><figcaption><p>Once you have copy pasted the code, you can click on save.</p></figcaption></figure>

**\[Optional] - If you don't want the white border in any case, you can copy paste the below code**

```css
.hosted-video-thumbnail::after {
    background-color: red !important;
    line-height: 1.8em !important;
    height: 1.9em !important;
    border-radius: 0.4em !important;
    border: none !important;
}
```

**That's it, you have a youtube styled play button on your hosted video now!**

<figure><img src="https://2305634809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEwac2MfNhMo5Z7EKQV1N%2Fuploads%2FVeoZG2OeJy8ZuddC0Ueq%2FYoutube%20Styled%20play%20button%20on%20hosted%20video.png?alt=media&amp;token=8dfa46c4-15d8-4228-81f4-58050e22bcd5" alt="Youtube styled play button"><figcaption></figcaption></figure>