@wordpress/block-library

# 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  <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>  ``` 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 ); ```  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  <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">  <p class="has-text-align-center has-large-font-size"> Guten Berg! </p>  </div> </div>  ``` ## 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.