Add video detail page

2021-08-22 15:36:03 +02:00
parent 13817a4318
commit fe34e7f8d7
7 changed files with 106 additions and 10 deletions
--- a/components/md-renderer/mdx-components/iframe.tsx
+++ b/components/md-renderer/mdx-components/iframe.tsx
@ -1,8 +1,20 @@
-import styled from 'styled-components';
+import { AspectRatio } from '@chakra-ui/react';

-export const IFrame = styled.iframe`
-  display: block;
-  width: 100%;
-  border: none;
-  margin: 30px auto;
-`;
+type IFrameProps = {
+  title: string;
+  src: string;
+};
+
+export default function IFrame(props: IFrameProps) {
+  return (
+    <AspectRatio maxW='100%' ratio={2} mb='18px'>
+      <iframe
+        frameBorder={0}
+        title={props.title}
+        src={props.src}
+        allow={'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'}
+        allowFullScreen
+      />
+    </AspectRatio>
+  );
+}