Merge pull request #34 from lion-packages/youtube-component

Properties have been added for iframe component

src/pages/components/YoutubeVideo.jsx

@@ -1,20 +1,18 @@
-import { Fragment } from "react";
+import { Ratio } from "react-bootstrap";
 
 export default function YoutubeVideo({ title, url, ratio = "16x9" }) {
   return (
-    <div
-      className={
-        "border border-secondary rounded p-2 mb-3 ratio ratio-" + ratio
-      }
+    <Ratio
+      aspectRatio={ratio}
+      className="border border-secondary rounded p-2 mb-3"
     >
       <iframe
         src={url}
         title={title}
-        frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        referrerpolicy="strict-origin-when-cross-origin"
-        allowfullscreen
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
       />
-    </div>
+    </Ratio>
   );
 }