video support

assets/stylesheets/_z-index.scss

@@ -29,7 +29,8 @@ $z-layers: (
 	".edit-post-header": 30,
 	".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
-	".wp-block-cover-image__inner-container": 0, // InnerBlocks area inside cover image block
+	".wp-block-cover-image__inner-container": 1, // InnerBlocks area inside cover image block
+	".wp-block-cover-image__video-background": 0, // Video background inside cover image block
 
 	// Side UI active buttons
 	".editor-block-mover__control": 1,

packages/block-library/src/cover-image/index.js

@@ -59,6 +59,10 @@ const blockAttributes = {
 	customOverlayColor: {
 		type: 'string',
 	},
+	backgroundType: {
+		type: 'string',
+		default: 'image',
+	},
 };
 
 export const name = 'core/cover-image';
@@ -71,7 +75,9 @@ const INNER_BLOCKS_TEMPLATE = [
 	} ],
 ];
 const INNER_BLOCKS_ALLOWED_BLOCKS = [ 'core/button', 'core/heading', 'core/paragraph' ];
-const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+const IMAGE_BACKGROUND_TYPE = 'image';
+const VIDEO_BACKGROUND_TYPE = 'video';
 
 export const settings = {
 	title: __( 'Cover Image' ),
@@ -127,20 +133,48 @@ export const settings = {
 		withNotices,
 	] )(
 		( { attributes, setAttributes, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
-			const { url, align, id, hasParallax, dimRatio } = attributes;
+			const {
+				align,
+				backgroundType,
+				dimRatio,
+				hasParallax,
+				id,
+				url,
+			} = attributes;
 			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 			const onSelectImage = ( media ) => {
 				if ( ! media || ! media.url ) {
 					setAttributes( { url: undefined, id: undefined } );
 					return;
 				}
+				let mediaType;
+				// for media selections originated from a file upload.
+				if ( media.media_type ) {
+					if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+						mediaType = IMAGE_BACKGROUND_TYPE;
+					} else {
+						// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+						// video contain the media type of 'file' in the object returned from the rest api.
+						mediaType = VIDEO_BACKGROUND_TYPE;
+					}
+				} else { // for media selections originated from existing files in the media library.
+					mediaType = media.type;
+				}
+				if ( mediaType ) {
+					setAttributes( {
+						url: media.url,
+						id: media.id,
+						backgroundType: mediaType,
+					} );
+					return;
+				}
 				setAttributes( { url: media.url, id: media.id } );
 			};
 			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 			const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 
 			const style = {
-				...backgroundImageStyles( url ),
+				...( backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles( url ) : {} ),
 				backgroundColor: overlayColor.color,
 			};
 
@@ -181,11 +215,11 @@ export const settings = {
 					{ !! url && (
 						<InspectorControls>
 							<PanelBody title={ __( 'Cover Image Settings' ) }>
-								<ToggleControl
+								{ IMAGE_BACKGROUND_TYPE === backgroundType && ( <ToggleControl
 									label={ __( 'Fixed Background' ) }
 									checked={ hasParallax }
 									onChange={ toggleParallax }
-								/>
+								/> ) }
 								<PanelColorSettings
 									title={ __( 'Overlay' ) }
 									initialOpen={ true }
@@ -225,7 +259,7 @@ export const settings = {
 								name: __( 'an image' ),
 							} }
 							onSelect={ onSelectImage }
-							accept="image/*"
+							accept="image/*,video/*"
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							notices={ noticeUI }
 							onError={ noticeOperations.createErrorNotice }
@@ -242,6 +276,15 @@ export const settings = {
 						style={ style }
 						className={ classes }
 					>
+						{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+							<video
+								className="wp-block-cover-image__video-background"
+								autoPlay
+								muted
+								loop
+								src={ url }
+							/>
+						) }
 						<div className="wp-block-cover-image__inner-container">
 							<InnerBlocks
 								template={ INNER_BLOCKS_TEMPLATE }
@@ -255,9 +298,17 @@ export const settings = {
 	),
 
 	save( { attributes, className } ) {
-		const { url, hasParallax, dimRatio, align, overlayColor, customOverlayColor } = attributes;
+		const {
+			align,
+			backgroundType,
+			customOverlayColor,
+			dimRatio,
+			hasParallax,
+			overlayColor,
+			url,
+		} = attributes;
 		const overlayColorClass = getColorClassName( 'background-color', overlayColor );
-		const style = backgroundImageStyles( url );
+		const style = backgroundType === IMAGE_BACKGROUND_TYPE ? backgroundImageStyles( url ) : {};
 		if ( ! overlayColorClass ) {
 			style.backgroundColor = customOverlayColor;
 		}
@@ -275,6 +326,13 @@ export const settings = {
 
 		return (
 			<div className={ classes } style={ style }>
+				{ VIDEO_BACKGROUND_TYPE === backgroundType && url && ( <video
+					className="wp-block-cover-image__video-background"
+					autoPlay
+					muted
+					loop
+					src={ url }
+				/> ) }
 				<div className="wp-block-cover-image__inner-container">
 					<InnerBlocks.Content />
 				</div>

packages/block-library/src/cover-image/style.scss

@@ -71,6 +71,7 @@
 		right: 0;
 		background-color: inherit;
 		opacity: 0.5;
+		z-index: z-index(".wp-block-cover-image__inner-container");
 	}
 
 	@for $i from 1 through 10 {
@@ -109,3 +110,14 @@
 		color: inherit;
 	}
 }
+
+.wp-block-cover-image__video-background {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	width: 100%;
+	height: 100%;
+	z-index: z-index(".wp-block-cover-image__video-background");
+	object-fit: fill;
+}