highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-10-04 16:37:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix youtube embed

Browse Source
This commit is contained in:
hzrd149
2023-02-07 17:04:18 -06:00
parent 737adca4f1
commit 1d34ec31eb
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/post/post-contents.tsx
View File

@@ -1,5 +1,12 @@
import React from "react"; import React from "react";
import { Image, ImageProps, Link, LinkProps } from "@chakra-ui/react"; import {
AspectRatio,
Box,
Image,
ImageProps,
Link,
LinkProps,
} from "@chakra-ui/react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkImages from "remark-images"; import remarkImages from "remark-images";
@@ -39,14 +46,16 @@ const HandleLinkTypes = (props: LinkProps) => {
const parts = youtubeVideoLink.exec(href); const parts = youtubeVideoLink.exec(href);
return parts ? ( return parts ? (
<iframe <AspectRatio ratio={16 / 10} maxWidth="30rem">
src={`https://www.youtube.com/embed/${parts[6]}`} <iframe
title="YouTube video player" src={`https://www.youtube.com/embed/${parts[6]}`}
frameBorder="0" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" frameBorder="0"
allowFullScreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
width="30rem" allowFullScreen
></iframe> width="100%"
></iframe>
</AspectRatio>
) : ( ) : (
<CustomLink {...props} /> <CustomLink {...props} />
); );