Skip to content

Add Safari compatibility warnings for embed component #1721

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
wants to merge 4 commits into
base: main
Choose a base branch
from
+27 −8
Open

Add Safari compatibility warnings for embed component #1721

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bb28e73
docs: add Safari compatibility warnings for embed component
devin-ai-integration[bot] Nov 3, 2025
0940b96
fix: use contractions in Safari warnings per Vale linting
devin-ai-integration[bot] Nov 3, 2025
97f2232
Merge branch 'main' into devin/1762193894-embed-safari-warning
devalog Nov 4, 2025
ca5ff5c
docs: discourage embed component for all use cases and fix broken link
devin-ai-integration[bot] Nov 4, 2025
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
10 changes: 7 additions & 3 deletions fern/products/docs/pages/component-library/default-components/embed.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ Fern also implements a custom component for embedding downloadable assets:

- `<Download src="..." />` - read more about it [below](#downloadable-assets).

<Warning>
The `<embed>` component is not well-supported on Safari and may cause compatibility issues. For embedding videos, use the `<video>` component instead, which provides better cross-browser support and more control over playback.
Copy link
Contributor

@github-actions github-actions bot Nov 3, 2025

Choose a reason for hiding this comment

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

🚫 [vale] reported by reviewdog 🐶
[Microsoft.Contractions] Use 'isn't' instead of 'is not'.

</Warning>

## Properties

<ParamField path="src" type="string" required={true}>
Expand All @@ -38,9 +42,9 @@ Fern also implements a custom component for embedding downloadable assets:
<embed src="./growing-fern.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
```

<Note>
Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the [`<video>` component](/learn/docs/content/write-markdown#embedding-videos) instead, which provides more control over playback.
</Note>
<Warning>
The `<embed>` component is not well-supported on Safari and may cause compatibility issues. For embedding videos, use the [`<video>` component](/learn/docs/content/write-markdown#embedding-videos) instead, which provides better cross-browser support and more control over playback. Additionally, videos with audio will automatically play when the page loads with `<embed>`.
</Warning>

</Tab>
<Tab title="Example using `<video>`">
Expand Down
4 changes: 4 additions & 0 deletions fern/products/docs/pages/component-library/writing-content/markdown.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,10 @@ For example, to embed a video, use the following Markdown:

<embed src="./embed-fern-waving.mp4" type="video/mp4" width="640px" height="360px" />

<Warning>
The `<embed>` component is not well-supported on Safari and may cause compatibility issues. For embedding videos, use the `<video>` component instead (see below), which provides better cross-browser support and more control over playback.
Copy link
Contributor

@github-actions github-actions bot Nov 3, 2025

Choose a reason for hiding this comment

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

🚫 [vale] reported by reviewdog 🐶
[Microsoft.Contractions] Use 'isn't' instead of 'is not'.

</Warning>

### Local videos

You can embed videos in your documentation using the HTML `<video>` tag. This gives you control over video playback settings like autoplay, looping, and muting.
Expand Down
Loading