11---
2- title : " Embedded Assets and Files"
3- description : " Embed local assets like PDFs, videos, and more in your documentation"
2+ title : Embedded Assets and Files
3+ description : Embed local assets like PDFs, videos, and more in your documentation
44---
55
66Fern enables using the native HTML5 tags to embed local assets like PDFs, videos, and more in your documentation. Supported tags include:
77
88- ` <embed src="..." /> ` - [ Embed External Content] ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed )
9+
910- ` <source src="..." /> ` - [ Media or Image Source] ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source )
1011
1112Fern also implements a custom component for embedding downloadable assets:
@@ -22,7 +23,7 @@ Fern also implements a custom component for embedding downloadable assets:
2223 MIME type of the asset (e.g. 'video/mp4', 'application/pdf')
2324</ParamField >
2425
25- ``` jsx
26+ ```
2627<embed src="./path/to/asset.pdf" type="application/pdf" />
2728```
2829
@@ -34,47 +35,41 @@ Fern also implements a custom component for embedding downloadable assets:
3435 <Tab title = " Example using `<embed>`" >
3536 <embed src = " ./growing-fern.mp4" type = " video/mp4" style = { { aspectRatio: ' 16 / 9' , width: ' 100%' }} />
3637
37- ``` jsx
38+ ```
3839 <embed src="./growing-fern.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
3940 ```
4041
4142 <Note >
42- 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.
43+ 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.
4344 </Note >
44-
4545 </Tab >
46+
4647 <Tab title = " Example using `<video>`" >
4748 <video style = { { aspectRatio: ' 16 / 9' , width: ' 100%' }} controls >
48- <source src = " ./growing-fern.mp4" type = " video/mp4" />
49- </video >
49+ <source src = " ./growing-fern.mp4" type = " video/mp4" />
50+ </video >
5051
51- ``` jsx
52- < video style= {{ aspectRatio: ' 16 / 9' , width: ' 100%' }} controls>
53- < source src= " ./growing-fern.mp4" type= " video/mp4" / >
54- < / video>
55- ```
52+ ``` jsx
53+ < video style= {{ aspectRatio: ' 16 / 9' , width: ' 100%' }} controls>
54+ < source src= " ./growing-fern.mp4" type= " video/mp4" / >
55+ < / video>
56+ ```
5657
5758 </Tab >
5859</Tabs >
5960
61+
6062### PDF Document
6163
6264<embed src = " ./all-about-ferns.pdf" type = " application/pdf" width = " 100%" height = " 500px" />
6365
64- ``` jsx
66+ ```
6567<embed src="./all-about-ferns.pdf" type="application/pdf" width="100%" height="500px" />
6668```
6769
6870## Common MIME Types
6971
70- | File Type | MIME Type |
71- | ---------- | ----------------- |
72- | PDF | ` application/pdf ` |
73- | MP4 Video | ` video/mp4 ` |
74- | WebM Video | ` video/webm ` |
75- | SVG Image | ` image/svg+xml ` |
76- | PNG Image | ` image/png ` |
77- | JPEG Image | ` image/jpeg ` |
72+ | File Type | MIME Type | | ---------- | ----------------- | | PDF | ` application/pdf ` | | MP4 Video | ` video/mp4 ` | | WebM Video | ` video/webm ` | | SVG Image | ` image/svg+xml ` | | PNG Image | ` image/png ` | | JPEG Image | ` image/jpeg ` |
7873
7974<Note >
8075 The supported file types and behavior may vary depending on the browser and the type of content being embedded. For
@@ -98,13 +93,14 @@ Enable users to download assets from within your documentation, instead of linki
9893</ParamField >
9994
10095<br />
96+
10197<br />
10298
10399<Download src = " ./all-about-ferns.pdf" >
104100 <Button intent = " primary" >Download PDF</Button >
105101</Download >
106102
107- ``` jsx
103+ ```
108104<Download src="./all-about-ferns.pdf">
109105 <Button intent="primary">Download PDF</Button>
110106</Download>
0 commit comments