Add support for muted property in Video Block for improved video sound control

[ankitkoo7]

Summary

This pull request introduces support for the muted property in the Video Block component within GrapesJS. This addition enables more precise control over video sound behavior, improving compatibility with autoplay requirements and overall user experience.

Changes Introduced

• Video Block Model Enhancements:

  • The muted attribute has been added as a boolean trait, allowing it to be set via the component interface.
  • For third-party providers (e.g., YouTube, Vimeo), the mute setting is now integrated into the generated embed URLs to ensure correct playback behavior.

• Video Block View Adjustments:

  • The muted state is now applied to both native <video> elements and embedded <iframe> videos, ensuring consistent behavior regardless of the video source.
  • Dynamic updates to the mute state are handled appropriately via event listeners.

• Trait and Event Integration:

  • The muted property is exposed in the editor through the trait manager.
  • Relevant events are registered to support runtime changes to the mute state.

Motivation

Due to modern browser restrictions, autoplaying videos must be muted by default. This update ensures that videos embedded using the Video Block component comply with these requirements, thereby avoiding unexpected playback issues. It also provides developers with greater control over media presentation within the GrapesJS environment.

Additional Notes

This enhancement improves both compliance and usability, offering a more complete and configurable video embedding experience across all supported platforms.