---
title: How to center the video play icon?
description: "Paste this css code below int the Codeixer > product gallery > Advanced settings > Custom CSS field ``` a.woocommerce-product-gallery__lightbox.wpgs-video { width: 100%; height: 100%; display: block; opacity: 1 !important; background:transparent; } a.woocommerce-product-gallery__lightbox.wpgs-video i { width: 100%; height: 100%; display:…"
url: "https://www.codeixer.com/docs/how-to-center-the-video-play-button/"
updated: "2022-10-08"
category: Product Gallery Slider
---

# How to center the video play icon?

Paste this css code below int the Codeixer > product gallery > Advanced settings > Custom CSS field

```
a.woocommerce-product-gallery__lightbox.wpgs-video {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1 !important;
  background:transparent;

}
a.woocommerce-product-gallery__lightbox.wpgs-video i {
    width: 100%;
    height: 100%;
    display: block;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 80px;
    color: #fff;
  margin: 0 !important;
}
.wpgs-image .wpgs-video i:before {

    border-radius: 50%;
    padding-left: 10px;
    box-shadow: 0px 0px 10px 0px #fff;
}
```