diff --git a/README.md b/README.md
index cd7f30e..34e263d 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,5 @@
# Devbook Docusaurus Video Plugin
-The Devbook Docusaurus plugin allows you to attach videos to code blocks in your [Docusaurus](https://docusaurus.io/) docs.
-
-## Demo
-Check the [demo](./example/) here.
+The Devbook Docusaurus video plugin allows you to attach videos to code blocks in your [Docusaurus](https://docusaurus.io/) docs.
## Usage
Install plugin:
@@ -18,7 +15,7 @@ module.exports = {
```
### Add video to a code snippet
-In the **Markdown** add `youtubeID` attribute to the code block:
+In **Markdown** add `youtubeID` attribute to the code block:
```js youtubeID=4HGNqFdaD34
function main() {
@@ -26,7 +23,7 @@ In the **Markdown** add `youtubeID` attribute to the code block:
}
```
-If you are using **MDX/JSX/TSX** `CodeBlock` add the `youtubeID` prop:
+If you are using **MDX/JSX/TSX** [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) add the `youtubeID` prop:
```jsx
import CodeBlock from '@theme/CodeBlock';
@@ -35,13 +32,13 @@ import MyComponentSource from '!!raw-loader!./myComponent';
{MyComponentSource}
```
-> You need to pass just the YouTube video ID, not the whole URL. You can get the ID from the normal URL - `https://www.youtube.com/watch?v=`**`[youtubeID]`**, or from the embed URL - `https://www.youtube.com/embed/`**`[youtubeID]`**.
+> You need to pass just the YouTube video ID, not the whole URL. You can get the ID from the normal video URL - `https://www.youtube.com/watch?v=`**`[youtubeID]`**, or from the embed URL - `https://www.youtube.com/embed/`**`[youtubeID]`**.
-### Add code highlights at set video timestamps
-The highlight attribute is in the format `start-end=(range)`.
+### Add code highlights at video timestamps
+The video highlights are in the format `start-end=(range)`.
The start and the end timestamps are in the `H:M:S` format and the hours are optional (`M:S`).
-In the **Markdown** add highlight attributes to the code block:
+In **Markdown** add highlight attributes to the code block:
```js youtubeID=4HGNqFdaD34 0:10-1:00=(1) 1:10-1:20=(1,2-3)
function main() {
@@ -49,7 +46,7 @@ In the **Markdown** add highlight attributes to the code block:
}
```
-If you are using **MDX/JSX/TSX** `CodeBlock` add the attributes as props:
+If you are using **MDX/JSX/TSX** [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) add the highlight attributes as props:
```jsx
import CodeBlock from '@theme/CodeBlock';
@@ -58,9 +55,9 @@ import MyComponentSource from '!!raw-loader!./myComponent';
{MyComponentSource}
```
-> The highlight range format is the same as in the Docusaurus code blocks - https://docusaurus.io/docs/markdown-features/code-blocks#highlighting-with-metadata-string, just with the `()` parentheses instead of the `{}` parentheses.
+> The highlight range format is the same as in the [Docusaurus code blocks]( https://docusaurus.io/docs/markdown-features/code-blocks#highlighting-with-metadata-string), just with the `()` parentheses instead of the `{}` parentheses.
-> You can change the video line highlight style by customizing the `docusaurus-highlight-code-line` class - the same way you would change the default Docusaurus highlight style.
+> You can change the video line highlight style by customizing the `docusaurus-highlight-code-line` class - the same way you would change the [default Docusaurus highlight style](https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting).
## Supported video sources
- YouTube
diff --git a/src/theme/CodeBlock/VideoPlayer/styles.module.css b/src/theme/CodeBlock/VideoPlayer/styles.module.css
index 78b9d5f..ea3a7b7 100644
--- a/src/theme/CodeBlock/VideoPlayer/styles.module.css
+++ b/src/theme/CodeBlock/VideoPlayer/styles.module.css
@@ -47,7 +47,7 @@
-ms-user-select: none;
height: 100%;
- filter: brightness(0.8) blur(3px);
+ filter: brightness(0.9) blur(2px);
}
.play {