Skip to content

Commit eb84d39

Browse files
Sanjay0302Sanjay0302
committed
Pushed to remote
1 parent 4227854 commit eb84d39

10 files changed

+607
-1
lines changed

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@
186186
same "printed page" as the copyright notice for easier
187187
identification within third-party archives.
188188

189-
Copyright [yyyy] [name of copyright owner]
189+
Copyright 2024 Sanjay0302
190190

191191
Licensed under the Apache License, Version 2.0 (the "License");
192192
you may not use this file except in compliance with the License.

‎NOTICE

Whitespace-only changes.

‎README.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Docsify Custom YouTube Embed Plugin
2+
3+
> This plugin enhances Docsify with `advanced YouTube video embedding` capabilities, allowing for easy insertion of responsive, customizable YouTube videos directly into your Markdown files.
4+
>
5+
> The detailed explanation of the plugin usage and its preview is shown in this [:link: Docsify documentation]().
6+
7+
---
8+
9+
## Features
10+
11+
1. **Simple Embed Syntax**
12+
2. **Customizable Dimensions**
13+
3. **Flexible Alignment**
14+
4. **Responsive Design**
15+
16+
> **This repository has two ways of embedding YouTube videos**
17+
>
18+
> - `yt-embed`: will only embed a YouTube video with customizable size and alignment.
19+
> - `yt-embed-collapse` can enclose a YouTube video within a collapsible element.
20+
21+
## Customization
22+
23+
> You can adjust the maximum width, box shadow, and border radius of the video containers by modifying the CSS provided with the plugin.
24+
25+
## Compatibility
26+
27+
>This plugin is designed to work with Docsify and has been tested with the latest version as of `July/2024`. It should be compatible with most modern web browsers.
28+
29+
## Contributing
30+
31+
> Contributions, issues, and feature requests are welcome! Feel free to check [issues page](https://github.com/Sanjay0302/docsify-yt-embed/issues/1).
32+
33+
---
34+
35+
## License
36+
37+
Copyright 2024 Sanjay0302
38+
39+
Licensed under the Apache License, Version 2.0 (the "License");
40+
you may not use this file except in compliance with the License.
41+
You may obtain a copy of the License at
42+
43+
<http://www.apache.org/licenses/LICENSE-2.0>
44+
45+
Unless required by applicable law or agreed to in writing, software
46+
distributed under the License is distributed on an "AS IS" BASIS,
47+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
48+
See the License for the specific language governing permissions and
49+
limitations under the License.
50+
51+
---
52+
53+
## License
54+
55+
Copyright [yyyy] [name of copyright owner]
56+
57+
Licensed under the Apache License, Version 2.0 (the "License");
58+
you may not use this file except in compliance with the License.
59+
You may obtain a copy of the License at
60+
61+
<http://www.apache.org/licenses/LICENSE-2.0>
62+
63+
Unless required by applicable law or agreed to in writing, software
64+
distributed under the License is distributed on an "AS IS" BASIS,
65+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
66+
See the License for the specific language governing permissions and
67+
limitations under the License.

‎docs/.nojekyll

Whitespace-only changes.

‎docs/README.md

+263
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
# Docsify Custom YouTube Embed Plugin
2+
3+
> This plugin enhances Docsify with `advanced YouTube video embedding` capabilities, allowing for easy insertion of responsive, customizable YouTube videos directly in your Markdown files.
4+
5+
---
6+
7+
## Features
8+
9+
1. **Simple Embed Syntax**
10+
2. **Customizable Dimensions**
11+
3. **Flexible Alignment**
12+
4. **Responsive Design**
13+
14+
> **This repository has 2 ways of embedding YouTube videos**
15+
>
16+
> - `yt-embed`: will only embed a YouTube video with customizable size and alignment.
17+
> - `yt-embed-collapse` can enclose a YouTube video within a collapsible element.
18+
19+
---
20+
21+
### Simple YouTube Embed (yt-embed)
22+
23+
<!-- tabs:start -->
24+
25+
#### **Preview**
26+
27+
> **Some arguments we need to pass in embedding syntax**
28+
>
29+
> - `ALIGNMENT`: The alignment on the page - 'left', 'center', or 'right' (optional, default is 'center')
30+
> - `WIDTH`: The width of the video (optional, default is 100%)
31+
> - `HEIGHT`: The height of the video (optional, default maintains 16:9 aspect ratio)
32+
33+
Note: As you can see in the Preview tab, this syntax will be automatically rendered as an embedded YouTube video.
34+
35+
<!-- tabs:start -->
36+
37+
<!-- tab:Syntax-1 -->
38+
## No arguments <!-- {docsify-ignore} -->
39+
40+
```syntax
41+
@yt(dQw4w9WgXcQ)
42+
```
43+
44+
@yt(dQw4w9WgXcQ)
45+
46+
<!-- tab:Syntax-2 -->
47+
48+
## Custom width (500px, centered) <!-- {docsify-ignore} -->
49+
50+
```syntax
51+
@yt(dQw4w9WgXcQ,500px)
52+
```
53+
54+
@yt(dQw4w9WgXcQ,500px)
55+
56+
<!-- tab:Syntax-3 -->
57+
## Left Allign <!-- {docsify-ignore} -->
58+
59+
```syntax
60+
@yt(dQw4w9WgXcQ,400px,300px,left)
61+
```
62+
63+
@yt(dQw4w9WgXcQ,400px,300px,left)
64+
65+
<!-- tab:Syntax-4 -->
66+
67+
## Right Allign <!-- {docsify-ignore} -->
68+
69+
```syntax
70+
@yt(dQw4w9WgXcQ,400px,300px,right)
71+
```
72+
73+
@yt(dQw4w9WgXcQ,400px,300px,right)
74+
75+
<!-- tab:Syntax-5 -->
76+
## Center Allign <!-- {docsify-ignore} -->
77+
78+
> This embed will be centered by default;
79+
> But also can be mentioned inline;
80+
81+
```syntax
82+
@yt(dQw4w9WgXcQ,400px,300px,center)
83+
```
84+
85+
@yt(dQw4w9WgXcQ,400px,300px,center)
86+
87+
<!-- tab:Syntax-6 -->
88+
## Ignoring a render <!-- {docsify-ignore} -->
89+
>
90+
> - When we need to include the syntax as normal text instead of rendering it as an embedding video;
91+
> - We have 2 methods:
92+
> - Adding `<!-- {docsify-ignore} -->` inline to the syntax;
93+
> - Writing the code within [`code-fence`](https://markdown.land/markdown-code-block);
94+
95+
1. Add `<!-- {docsify-ignore} -->` inline to the syntax.
96+
97+
```syntax
98+
@yt(dQw4w9WgXcQ,400px,300px,center) <!-- {docsify-ignore} -->
99+
```
100+
101+
2. [code-fence](https://markdown.land/markdown-code-block)
102+
- Here enclose the syntax inside [`code-fence`](https://markdown.land/markdown-code-block).
103+
104+
<!-- tabs:end -->
105+
106+
#### **Installation**
107+
108+
- Download the `yt-embed.js` and `yt-embed.css` file and place it in your Docsify project directory.
109+
- Add the following line to your index.html file, after the main Docsify script:
110+
111+
```html
112+
<script src="path/to/yt-embed.js"></script>
113+
```
114+
115+
```html
116+
<link rel="stylesheet" href="path/to/yt-embed.css">
117+
```
118+
119+
#### **Usage**
120+
121+
> In `Preview` tab explains usage of all syntax and its rendered view.
122+
123+
Use the following syntax in your Markdown files to embed YouTube videos:
124+
125+
```syntax
126+
@yt(<EMBED-ID>,<WIDTH>,<height>,<ALIGNMENT>)"
127+
```
128+
129+
### Where to find Embed-ID
130+
131+
- Go to [Youtube](https://www.youtube.com/)
132+
- Select any video that you want to embed.
133+
- then look for it's URL; (it will look like either of this)
134+
135+
```url
136+
https://youtu.be/HccqokXN2n8?feature=shared
137+
https://www.youtube.com/watch?v=HccqokXN2n8&list=PL4Gr5tOAPttLOY9IrWVjJlv4CtkYI5cI_&index=6
138+
```
139+
140+
> So in this `Embed-ID` is `HccqokXN2n8`
141+
142+
<!-- tabs:end -->
143+
144+
### YT Collapsible element (yt-embed-collapse)
145+
146+
<!-- tabs:start -->
147+
148+
#### **Preview**
149+
150+
> **Some arguments we need to pass in embedding syntax**
151+
>
152+
> - `Embed-id`: Provide embed-id for yt-video, this is explained in `Usage tab`
153+
> - `Title`: Title text to display; Probably it will be title of a video. (optional, default is `Click to expand`)
154+
155+
Note: As you can see in the Preview tab, this syntax will be automatically rendered as an embedded YouTube video.
156+
157+
<!-- tabs:start -->
158+
159+
<!-- tab:Syntax-1 -->
160+
161+
## No arguments <!-- {docsify-ignore} -->
162+
163+
> Default `title` is Click here to watch the video. (You can change this in `JS` file);
164+
>
165+
> No argument is passed;
166+
167+
```syntax
168+
[youtube:dQw4w9WgXcQ]
169+
```
170+
171+
[youtube:dQw4w9WgXcQ]
172+
173+
<!-- tab:Syntax-2 -->
174+
175+
## Custom Title <!-- {docsify-ignore} -->
176+
177+
> Custom `Title` tag can be given inline after this `|`.
178+
179+
```syntax
180+
[youtube:dQw4w9WgXcQ | My own text - Click to expand]
181+
```
182+
183+
[youtube:dQw4w9WgXcQ | My own text - Click to expand]
184+
185+
<!-- tab:Syntax-3 -->
186+
187+
## Ignoring a render <!-- {docsify-ignore} -->
188+
189+
>
190+
> - When we need to include the syntax as normal text instead of rendering it as an embedding video;
191+
> - We have 2 methods:
192+
> - Adding `<!-- {docsify-ignore} -->` inline to the syntax;
193+
> - Writing the code within [`code-fence`](https://markdown.land/markdown-code-block);
194+
195+
1. Add `<!-- {docsify-ignore} -->` inline to the syntax.
196+
197+
```syntax
198+
[youtube:dQw4w9WgXcQ] <!-- {docsify-ignore} -->
199+
```
200+
201+
2. [code-fence](https://markdown.land/markdown-code-block)
202+
- Here enclose the syntax inside [`code-fence`](https://markdown.land/markdown-code-block).
203+
204+
<!-- tabs:end -->
205+
206+
#### **Installation**
207+
208+
- Download the `yt-embed-collapse.js` and `yt-embed-collapse.css` file and place it in your Docsify project directory.
209+
- Add the following line to your index.html file, after the main Docsify script:
210+
211+
```html
212+
<script src="path/to/yt-embed-collapse.js"></script>
213+
```
214+
215+
```html
216+
<link rel="stylesheet" href="path/to/yt-embed-collapse.css">
217+
```
218+
219+
#### **Usage**
220+
221+
> `Preview` tab explains how to use embedding syntax and also visualise its rendered view.
222+
223+
Use the following syntax in your Markdown files to embed YouTube videos:
224+
225+
```syntax
226+
[youtube:<embed-id> | <title-text>]
227+
```
228+
229+
> `title-text` is optional
230+
231+
### Where to find Embed-ID <!-- {docsify-ignore} -->
232+
233+
- Go to [Youtube](https://www.youtube.com/)
234+
- Select any video that you want to embed.
235+
- then look for it's URL; (it will look like either of this)
236+
237+
```url
238+
https://youtu.be/HccqokXN2n8?feature=shared
239+
https://www.youtube.com/watch?v=HccqokXN2n8&list=PL4Gr5tOAPttLOY9IrWVjJlv4CtkYI5cI_&index=6
240+
```
241+
242+
> So in this attached example `Embed-ID` is `HccqokXN2n8`
243+
244+
<!-- tabs:end -->
245+
246+
247+
---
248+
249+
## License
250+
251+
Copyright 2024 Sanjay0302
252+
253+
Licensed under the Apache License, Version 2.0 (the "License");
254+
you may not use this file except in compliance with the License.
255+
You may obtain a copy of the License at
256+
257+
<http://www.apache.org/licenses/LICENSE-2.0>
258+
259+
Unless required by applicable law or agreed to in writing, software
260+
distributed under the License is distributed on an "AS IS" BASIS,
261+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
262+
See the License for the specific language governing permissions and
263+
limitations under the License.

0 commit comments

Comments
 (0)