Video Block: Playback Control is necessary for Loop, Muted, Play Inline

[Rishit30G]

Description

When using the video block, if the Loop, Muted, or Play Inline options are enabled without selecting Playback Controls, the video does not play on the frontend.

Step-by-step reproduction instructions

1. Add a new post
2. Insert a 'Video' Block
3. Add a video to the video block
4. Navigate to the settings panel present on the right panel
5. Try to toggle on 'Mute' / 'Loop' / 'Play inline' option ( either or all )
6. Save the post and check the frontend
7. Notice that the video looks like a thumbnail / static image
8. Go back the editor and toggle on the 'Playback controls'
9. Save the post and check the frontend
10. Notice that the video starts playing

Screenshots, screen recording, code snippet

Screen.Recording.2025-02-23.at.9.19.11.PM.mov

Environment info

• WordPress 6.7.2
• Gutenberg 20.3.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Rishit30G]

So my idea to fix this is quite similar to how #69218 was fixed

• When Loop, Muted, or Play Inline are selected whether independently, in combination, or all at once, the Playback Controls should be toggled on and disabled.
• When Autoplay is toggled on then the user should have the flexibility to work with the Loop, Play Inline and Playback Control Independently

Would appreciate some thoughts on this 🙇🏻

Sharing a screencast for better understanding:

Screen.Recording.2025-02-24.at.12.13.06.PM.mov

cc: @Mamaduka

[Mamaduka]

@Rishit30G, yes, I think we can use the previous PR as a starting point for proposed fixes. However, since the issue is getting more complicated, we might need to define the attribute relations somehow.

Additionally, let's review the spec for the video element, create a table of required/connected attributes and handle them all at once.

[Rishit30G]

Thanks for the suggestion @Mamaduka 👍🏻
Please find the table with the required/connected attributes

	Autoplay	Loop	Muted	Playback Controls	Play inline
Autoplay	-	☑️	✅	☑️	☑️
Loop	☑️	-	❌	✅	❌
Muted	✅	❌	-	✅	❌
Playback Controls	☑️	✅	✅	-	✅
Play Inline	☑️	❌	❌	✅	-

PS: The table is based on the latest change that makes autoplay and muted work together

☑️ : Works but is not necessary
✅ : Necessary connection
❌ : Results in static image