diff --git a/components/text.js b/components/text.js
index 86738395..fb8df83a 100644
--- a/components/text.js
+++ b/components/text.js
@@ -1,5 +1,6 @@
import styles from './text.module.css'
import ReactMarkdown from 'react-markdown'
+import YouTube from 'react-youtube'
import gfm from 'remark-gfm'
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
@@ -105,6 +106,25 @@ export default memo(function Text ({ nofollow, imgproxyUrls, children, tab, ...o
return
}, [imgproxyUrls, outerProps, tab])
+ const renderYoutubeUrl = useCallback((url) => {
+ if (url) {
+ const regExp = /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|embed\/)?([^?]+)/
+ const match = url.match(regExp)
+ if (match && match[4]) {
+ return (
+
+ )
+ }
+ }
+
+ return null
+ }, [])
+
return (
{text}
+ // Render video if it's a valid Youtube url, otherwise null
+ const video = renderYoutubeUrl(href)
+ return (
+ <>
+ {text}
+ {video}
+ >
+ )
}
// assume the link is an image which will fallback to link if it's not
diff --git a/components/text.module.css b/components/text.module.css
index 4c25742a..dbcb8ea8 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -148,4 +148,11 @@ img.fullScreen {
.text h6 {
font-size: .85rem;
+}
+
+.videoContainer {
+ aspect-ratio: 16/9;
+ margin-bottom: .5rem;
+ margin-top: .5rem;
+ max-width: 640px;
}
\ No newline at end of file