diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index d2dcd95365c3b..a36263885bed7 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -95,8 +95,18 @@
},
"interactivity": {
"clientNavigation": true
+ },
+ "__experimentalBorder": {
+ "radius": true,
+ "color": true,
+ "width": true,
+ "style": true,
+ "__experimentalSkipSerialization": true
}
},
+ "selectors": {
+ "border": ".wp-block-video video, .wp-block-video .components-placeholder"
+ },
"editorStyle": "wp-block-video-editor",
"style": "wp-block-video"
}
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index ba6b4c869aefc..fe77d061beaf5 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -24,6 +24,7 @@ import {
MediaUploadCheck,
MediaReplaceFlow,
useBlockProps,
+ __experimentalUseBorderProps as useBorderProps,
} from '@wordpress/block-editor';
import { useRef, useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
@@ -58,6 +59,7 @@ function VideoEdit( {
const posterImageButton = useRef();
const { id, controls, poster, src, tracks } = attributes;
const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+ const borderProps = useBorderProps( attributes );
useUploadMediaFromBlobURL( {
url: temporaryURL,
@@ -136,13 +138,17 @@ function VideoEdit( {
const placeholder = ( content ) => {
return (
{ content }
@@ -280,9 +286,11 @@ function VideoEdit( {
*/ }
diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
index 06c0dfd9cdd46..f0ba0fd670f5e 100644
--- a/packages/block-library/src/video/style.scss
+++ b/packages/block-library/src/video/style.scss
@@ -4,6 +4,8 @@
video {
width: 100%;
vertical-align: middle;
+ // Video tag has customizable border, border-box makes that more predictable.
+ box-sizing: border-box;
}
@supports (position: sticky) {