diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index d206db98..8027606e 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -11,6 +11,7 @@ import { IBreadcumbsPart, IMeta, IPage, ITag, FileTokenData, Token } from 'src/t
 import { joinTokens } from 'src/lib/tokens'
 import { size, ext } from 'src/lib/file'
 import { Html } from 'src/components/Html'
+import { Youtube } from '@/components/Youtube'
 
 function array<T>(value: T | T[]) {
     return Array.isArray(value)
@@ -18,26 +19,6 @@ function array<T>(value: T | T[]) {
         : [value]
 }
 
-const Youtube: React.SFC<{ url: string }> = props => {
-    const url = new URL(props.url)
-    const videoId = url.searchParams.get('v')
-    if (!videoId) {
-        return null
-    }
-
-    const src = `//www.youtube.com/embed/${videoId}`
-
-    return (
-        <div className="kazimir__video">
-            <iframe
-                src={src}
-                frameBorder="0"
-            // allowFullscreen
-            />
-        </div>
-    )
-}
-
 const File: React.SFC<FileTokenData> = props => {
     const fileSize = size(props.file_size)
     const format = ext(props.file_format)
diff --git a/src/components/Youtube/index.tsx b/src/components/Youtube/index.tsx
new file mode 100644
index 00000000..3c58e729
--- /dev/null
+++ b/src/components/Youtube/index.tsx
@@ -0,0 +1,23 @@
+export type YoutubeProps = {
+    url: string
+}
+
+export const Youtube: React.FC<{ url: string }> = props => {
+    const url = new URL(props.url)
+    const videoId = url.searchParams.get('v')
+    if (!videoId) {
+        return null
+    }
+
+    const src = `//www.youtube.com/embed/${videoId}`
+
+    return (
+        <div className="kazimir__video">
+            <iframe
+                src={src}
+                frameBorder="0"
+            // allowFullscreen
+            />
+        </div>
+    )
+}