diff --git a/packages/dante3/docs/renderer.mdx b/packages/dante3/docs/renderer.mdx
index 51b9b7f..ccd2025 100644
--- a/packages/dante3/docs/renderer.mdx
+++ b/packages/dante3/docs/renderer.mdx
@@ -116,4 +116,23 @@ That’s what the `Renderer` is for. It’s a helper function which renders HTML
 </State>
 ```
 
+### Video Recorder
+
+```js live=true
+<State initial={{ data: "" }}>
+  {({ state, setState }) => (
+    <div className="break-words">
+      <Renderer raw={
+        {"type":"doc","content":[{"type":"VideoRecorderBlock","attrs":{
+          "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+          "src":null,
+          "width":"","height":"","loading":false,"loading_progress":0,"caption":null,"direction":"center","file":null},"content":[{"type":"text","text":"kokokk"}]}]}
+      }/>
+    </div>
+  )}
+</State>
+```
+
+
+
 
diff --git a/packages/dante3/package.json b/packages/dante3/package.json
index 8470d0f..421691b 100644
--- a/packages/dante3/package.json
+++ b/packages/dante3/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dante3",
   "description": "Dante3 is a text editor built on top of TipTap",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "main": "package/Dante.cjs.js",
   "jsnext:main": "package/Dante.es.js",
   "module": "package/Dante.es.js",
@@ -79,4 +79,4 @@
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/dante3/src/renderer.tsx b/packages/dante3/src/renderer.tsx
index c4ca44a..7f81805 100644
--- a/packages/dante3/src/renderer.tsx
+++ b/packages/dante3/src/renderer.tsx
@@ -54,7 +54,7 @@ function Renderer({raw, html, theme, domain} : RendererProps) {
         return (
           <FileBlockRenderer blockKey={node.id} data={node.attrs} domain={domain}/>
         )
-      case 'VideoRecorder':
+      case 'VideoRecorderBlock':
         return <VideoRecorderRenderer blockKey={node.id} data={node.attrs} domain={domain}/>
 
       case 'paragraph':
diff --git a/packages/dante3/src/styled/base.tsx b/packages/dante3/src/styled/base.tsx
index 1e6c28e..fca53b4 100644
--- a/packages/dante3/src/styled/base.tsx
+++ b/packages/dante3/src/styled/base.tsx
@@ -15,7 +15,7 @@ const EditorContainer = styled.div`
   font-size: ${(props: any) => props.theme.dante_editor_font_size};
   line-height: ${(props: any) => props.theme.dante_editor_line_height};
   color: ${(props: any) =>  props.theme.dante_text_color };
-  background-color: ${(props: any) => props.theme.dante_bg_color};
+  // background-color: ${(props: any) => props.theme.dante_bg_color};
 
   text-rendering: optimizeLegibility;