On the Styles Overview documentation page, the embedded video inside the <figure class="wp-block-video"> element overflows the content area, causing layout issues and making the documentation harder to read. All videos on this page are affected.
Steps to Reproduce:
- Visit the Styles Overview documentation page: https://wordpress.org/documentation/article/styles-overview/
- Scroll to the embedded video section.
Observe the video element overflowing outside the content container.
Expected Behavior:
The video should resize responsively and fit within the documentation layout.
Actual Behavior:
The video exceeds the container width, creating horizontal scrolling and breaking the page layout as well as making the sidebar menu links inaccessible.
Suggested Fix:
Add the following CSS so the video scales properly within the container:
.wp-block-video video {
width: 100%;
}
Result:
Additional Context:
This issue may impact readability on smaller screens or when resizing the browser window.
On the Styles Overview documentation page, the embedded video inside the
<figure class="wp-block-video">element overflows the content area, causing layout issues and making the documentation harder to read. All videos on this page are affected.Steps to Reproduce:
Observe the video element overflowing outside the content container.
Expected Behavior:
The video should resize responsively and fit within the documentation layout.
Actual Behavior:
The video exceeds the container width, creating horizontal scrolling and breaking the page layout as well as making the sidebar menu links inaccessible.
Suggested Fix:
Add the following CSS so the video scales properly within the container:
Result:
Additional Context:
This issue may impact readability on smaller screens or when resizing the browser window.