Skip to content

docs update : embed and super hero video controls #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BaskarMitrah wants to merge 1 commit into
base: main
Choose a base branch
from
+57 −5
Open

docs update : embed and super hero video controls #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions src/pages/blocks/embed/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,34 @@ Short-form video new
https://your-media-link.com
```

Optional playback attributes (`loop`, `autoplay`, `controls`) apply to the same pattern: add them on the opening tag, then put the media URL on the following line.

```markdown
<Embed slots="video" loop />

https://your-media-link.com
```

```markdown
<Embed slots="video" controls="false" />
Comment thread
BaskarMitrah marked this conversation as resolved.

https://your-media-link.com
```

```markdown
<Embed slots="video" autoplay />

https://your-media-link.com
```

```markdown
<Embed slots="video" loop autoplay />

https://your-media-link.com
```

A self-closing tag with no space before `/>` (for example `loop/>`) is equivalent to `loop />`.

## Parameters

- **slots**:
Expand All @@ -33,6 +61,17 @@ https://your-media-link.com
- **short**
- `"true"` - An attribute displays the video in a short-form (vertical) format, similar to YouTube Shorts or Instagram Reels.

- **loop** (optional, boolean)
- When present, the video repeats when it finishes. Example: `<Embed slots="video" loop />` or `<Embed slots="video" loop/>`.

- **autoplay** (optional, boolean)
- When present, playback starts automatically when the player loads. Browser autoplay policies (muted requirement, user gesture, etc.) may still apply.
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For YouTube (shorts, isShort, normal), Vimeo, and MP4, the block adds muting automatically when autoplay is on. But Instagram, TikTok, and Twitter pass autoplay through without muting — those are third-party iframes the block doesn't control. The "muted requirement" in parentheses implies muting is always the author's problem; it should be removed or clarified to distinguish platforms where muting is handled vs. where it isn't.


- **controls** (optional)
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- **controls** (optional)
- **nocontrols** (optional, boolean)

- Set to `"false"` to hide the default player controls. Example: `<Embed slots="video" controls="false" />`.
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


You can combine attributes on the same opening tag (for example `loop autoplay`).

<InlineAlert slots="text" />

When using a `youtube.com/shorts/` URL, the block automatically detects it as a Short. Use `short="true"` explicitly when the URL does not include `/shorts/` in the path.
Expand Down
19 changes: 15 additions & 4 deletions src/pages/blocks/superhero/halfwidth/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,24 @@ This is a sample description text for the superhero block.
- **textColor**: Text color. Options: `black`, `white`, `gray`, `navy` (default: `black`)
- **overGradient**: Improves button visibility over a gradient background

- **Video playback** (optional, when `video` is in `slots`): Add any of these as boolean attributes on the opening `<Superhero>` tag (no value)
- **controls** — Present to show the default browser video controls.
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- **autoplay** — Start playback when the hero loads.
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On by default; off when controls is set. Adding autoplay re-enables it and mute.

- **loop** — Repeat the video when it ends.
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default on unless controls is set


<Superhero slots="image, heading, text, buttons" variant="halfWidth" />
**Example :**
Copy link
Copy Markdown
Contributor

@melissag-ensemble melissag-ensemble May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**Example :**
**Example:**


![Hero image](../../../assets/cc-hero.png)
```markdown
<Superhero slots="video, heading, text, buttons" variant="halfWidth" textColor="black" overGradient controls autoplay loop/>

# Page Heading
[video_url](https://example.com/path/to/video.mp4)

This is a sample description text for the superhero block.
# Build Extensions for Your Users

Create powerful tools and integrations.

* [Get Started](https://example.com/getting-started)
* [View Examples](https://example.com/examples)
```

For a hero with a **background image** and video together, see [Half Width with Background Image and Video](with-background-image-and-video.md).
4 changes: 3 additions & 1 deletion src/pages/blocks/superhero/halfwidth/with-background-image-and-video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ Superhero half width variant with background image and video

## Syntax

Optional **controls**, **autoplay**, and **loop** boolean attributes can be added on the opening tag when using the `video` slot (see [Half Width parameters](index.md) for descriptions).

```markdown
<Superhero slots="fullWidthBackground, video, heading, text, buttons" variant="halfWidth" textColor="white" overGradient />
<Superhero slots="fullWidthBackground, video, heading, text, buttons" variant="halfWidth" textColor="white" overGradient controls autoplay loop />

![Gradient background](../../../assets/vertical-gradient.png)

Expand Down
Loading