# Video block

## Video

{% embed url="<https://youtu.be/-1hz0FdXRPc>" %}

### Custom CSS & CSS Variables

We've provided an area in each block that will allow you to add your own custom CSS so you can match your brands style exactly.  We decided to make this even easier by providing CSS variable for common changes to make this even easier 🎉

Here is a list of the Variables available in this block:&#x20;

```
--border-radius
--background-color
--aspect-ratio
--play-button-size
--play-button-color

--margin-top
--margin-bottom
--padding
--size
```

#### Custom CSS example

Rounded corners on videos are quite popular right now, as are mesh gradients.  Here's the easy way to customize your video block with custom CSS variables:

```
{
    --border-radius: 20px;
    --padding: 25px 0;
    --background-color: radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}
```

<figure><img src="https://276451088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiJpf70jLagzGk8zoz4fu%2Fuploads%2FjEDA0E0XvDk32NeqGVpL%2FScreen%20Shot%202024-01-26%20at%203.19.43%20PM.png?alt=media&#x26;token=521bba9b-990d-4b3d-bd8e-e649b1babe0b" alt=""><figcaption></figcaption></figure>

### Dynamic blocks with MetaObjects

{% hint style="info" %}
For the most in-depth explanation check out the instructions for [Image with text](#dynamic-blocks-with-metaobjects)
{% endhint %}

1. MetaObject definition

We've create a simple way to create MetaObject definitions in the app.  Here's an explanation of our one-click metaobject feature:

{% embed url="<https://youtu.be/0rAflHJwEO8?si=tSmqCjoE9iHrcY8W>" %}

<figure><img src="https://276451088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiJpf70jLagzGk8zoz4fu%2Fuploads%2F8zEjb7DbgfzwtWMaee3C%2FScreen%20Shot%202024-01-26%20at%209.54.45%20AM.png?alt=media&#x26;token=9ba59ec8-683f-4432-8887-0f0d66b4ab6c" alt="" width="563"><figcaption></figcaption></figure>

1. Product Metafield definition
2. Entry for the MetaObject

{% hint style="info" %}
Hot tip 🔥&#x20;

If there's not a good field for a display name, changing the handle will set the title of the entry - which makes it easier to find later 😁.  Just remember, no spaces in the name&#x20;
{% endhint %}

<figure><img src="https://276451088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiJpf70jLagzGk8zoz4fu%2Fuploads%2FW687kVRfhZlgcyiMvGxi%2FScreen%20Shot%202024-01-26%20at%208.56.33%20AM.png?alt=media&#x26;token=86866974-3f72-44a3-aa13-a9adac01de3a" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="https://276451088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiJpf70jLagzGk8zoz4fu%2Fuploads%2F47uLzGpFZzQCODcz2lQW%2FScreen%20Shot%202024-01-26%20at%208.57.10%20AM.png?alt=media&#x26;token=d0c2d129-9758-4894-a325-50bf4fc24a61" alt="" width="563"><figcaption></figcaption></figure>

1. Connect the MetaObject entry to the Product

<figure><img src="https://276451088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiJpf70jLagzGk8zoz4fu%2Fuploads%2F6yf963cBAPML4zf55pEM%2FScreen%20Shot%202024-01-26%20at%203.04.07%20PM.png?alt=media&#x26;token=7c9583aa-31df-4a92-a900-a87c13cb5bc4" alt="" width="563"><figcaption></figcaption></figure>

1. Connect specific field to the block

<figure><img src="https://276451088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiJpf70jLagzGk8zoz4fu%2Fuploads%2FMjzA9P4qNyUUmpQbcKN1%2FZight%20Recording%202024-01-26%20at%2008.59.09%20AM.gif?alt=media&#x26;token=c1413660-e7ec-4cf7-8d0b-ee074af3f2bc" alt=""><figcaption></figcaption></figure>