# Cover

## Restricting video embed providers

The Cover block can use a background video embedded from a URL. The `allowedVideoProviders` attribute controls which providers are offered when embedding a video. It accepts an array of provider slugs and defaults to all supported providers: `youtube`, `vimeo`, `videopress`, `animoto`, `tiktok`, and `wordpress-tv`.

This attribute can only _remove_ providers from the supported list, never add new ones. If no providers remain allowed, the "Embed video from URL" option is hidden entirely.

You can apply this attribute directly in the block markup. For example, the following markup allows only YouTube and Vimeo.

```html
<!-- wp:cover {"allowedVideoProviders":["youtube","vimeo"]} -->
<div class="wp-block-cover">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span>
	<div class="wp-block-cover__inner-container"></div>
</div>
<!-- /wp:cover -->
```

You can also use [block filters](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/) to set the default value globally. The example below removes YouTube from every Cover block while keeping the other providers.

```php
function example_restrict_cover_video_providers( $args, $block_type ) {

	if ( 'core/cover' !== $block_type ) {
		return $args;
	}

	if ( ! isset( $args['attributes']['allowedVideoProviders']['default'] ) ) {
		return $args;
	}

	// Remove YouTube.
	$args['attributes']['allowedVideoProviders']['default'] = array_values(
		array_diff(
			$args['attributes']['allowedVideoProviders']['default'],
			[ 'youtube' ]
		)
	);

	return $args;
}
add_filter( 'register_block_type_args', 'example_restrict_cover_video_providers', 10, 2 );
```

To disable video embeds entirely, either `unset` the attribute's default or set it to an empty array. The example below removes it for every Cover block.

```php
function example_disable_cover_video_embeds( $args, $block_type ) {

	if ( 'core/cover' !== $block_type ) {
		return $args;
	}

	unset( $args['attributes']['allowedVideoProviders']['default'] );

	return $args;
}
add_filter( 'register_block_type_args', 'example_disable_cover_video_embeds', 10, 2 );
```

<!-- START TOKEN(Autogenerated block API docs) -->
Add an image or video with a text overlay.

- **Name:** `core/cover`
- **Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)

## Attributes

_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._

| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
|-----------|------|---------|-------------|
| `url` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
| `useFeaturedImage` | `boolean` | `false` | — |
| `id` | `number` | — | — |
| `alt` | `string` | `""` | — |
| `hasParallax` | `boolean` | `false` | — |
| `isRepeated` | `boolean` | `false` | — |
| `dimRatio` | `number` | `100` | — |
| `overlayColor` | `string` | — | — |
| `customOverlayColor` | `string` | — | — |
| `isUserOverlayColor` | `boolean` | — | — |
| `backgroundType` | `string` | `"image"` | — |
| `focalPoint` | `object` | — | — |
| `minHeight` | `number` | — | — |
| `minHeightUnit` | `string` | — | — |
| `gradient` | `string` | — | — |
| `customGradient` | `string` | — | — |
| `contentPosition` | `string` | — | — |
| `isDark` | `boolean` | `true` | — |
| `templateLock` | `string \| boolean` | — | [Enum](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `all`, `insert`, `contentOnly`, `false` |
| `tagName` | `string` | `"div"` | — |
| `sizeSlug` | `string` | — | — |
| `poster` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `poster` |
| `allowedVideoProviders` | `array` | `["youtube","vimeo","videopress","animoto","tiktok","wordpress-tv"]` | — |

## Supports

_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._

- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
  - `padding`: `true`
  - `margin`: `["top","bottom"]`
  - `blockGap`: `true`
- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
  - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `false`
  - [`enableContrastChecker`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-enablecontrastchecker): `false`
- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
  - `aspectRatio`: `true`
- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
  - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `false`
- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
  - `clientNavigation`: `true`
- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
  - [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
- [`allowedBlocks`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#allowedblocks): `true`

## Context

_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._

**Uses context:**

- `postId`
- `postType`

## CSS Selectors

_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._

- **filter**:
  - duotone: `.wp-block-cover > .wp-block-cover__image-background, .wp-block-cover > .wp-block-cover__video-background`

## Block Markup

This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.

```html
<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
<div class="wp-block-cover">
    <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover" />
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
    <div class="wp-block-cover__inner-container">
		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
		<p class="has-text-align-center has-large-font-size">
			Guten Berg!
		</p>
		<!-- /wp:paragraph -->
	</div>
</div>
<!-- /wp:cover -->
```

## Source

- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover/) — browse `edit.js`, `save.js`, `index.php`, and more.

<!-- END TOKEN(Autogenerated block API docs) -->
