improved embeded youtube videos in the documentations

opiopan · Jun 14, 2024 · eb41f5c · eb41f5c
1 parent e144371
commit eb41f5c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
@@ -31,14 +31,17 @@ Although fsmapper offers a multitude of functions, it can be summarized into fol
 
 If you watch the following video, you'll get a better understanding of what can be achieved with fsmapper as described above.
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
 <div align="center" className="movie">
-    <iframe
-        width="100%" height="100%"
-        src="https://www.youtube.com/embed/Ee6uw2BYdgE" 
-        title="YouTube video player" frameborder="0" 
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen="">
-    </iframe>
+  <LiteYouTubeEmbed
+    id='Ee6uw2BYdgE'
+    params="autoplay=1&autohide=1&showinfo=0&rel=0"
+    title='fsmapper example'
+    poster="maxresdefault"
+    webp
+  />
 </div>
 
 In this video, A320's virtual instrument panels are assembled on a 10.5-inch touchscreen by combining six pop-out windows 

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -23,6 +23,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "sass": "^1.77.4"
   },
   "devDependencies": {

diff --git a/docs/src/components/HomepageTopics/index.js b/docs/src/components/HomepageTopics/index.js
@@ -1,10 +1,11 @@
 import clsx from 'clsx';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Heading from '@theme/Heading';
 import {Version} from '@site/.version';
 import styles from './styles.module.scss';
-import { lazy } from 'react';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 const TopicList = [
     {
@@ -35,7 +36,8 @@ const TopicList = [
     },
     {
         title: 'Touchscreen Cockpit Showcase',
-        videosrc: 'https://www.youtube.com/embed/rIp1M2r1_ko',
+        videosrc: 'rIp1M2r1_ko',
+        videotitle: 'Touchscreen Cockpit Showcase',
         description: (
             <>
                 <p>
@@ -58,21 +60,21 @@ const TopicList = [
     },
 ];
 
-function Video({src}) {
+function Video({src, title}) {
     return (
         <div className={clsx(styles.topicMovie, styles.topicImg)}>
-            <iframe
-                width="100%" height="100%"
-                src={src}
-                title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                allowfullscreen="">
-            </iframe>
+            <LiteYouTubeEmbed
+                id={src}
+                params="autoplay=1&autohide=1&showinfo=0&rel=0"
+                title={title}
+                poster="maxresdefault"
+                webp
+            />
         </div>
     );
 }
 
-function Topic({imagesrc, imagewidth, imageheight, videosrc, title, description}) {
+function Topic({imagesrc, imagewidth, imageheight, videosrc, videotitle, title, description}) {
     return (
         <div className={clsx("row", styles.topicRow)}>
             <div className={clsx('col col--6', styles.topicCol)}>
@@ -88,7 +90,7 @@ function Topic({imagesrc, imagewidth, imageheight, videosrc, title, description}
                     </div>
                 : videosrc ?
                     <div className={clsx('text-center', styles.topicImgContainer)}>
-                        <Video src={videosrc}/>
+                        <Video src={videosrc} title={videotitle}/>
                     </div>
                 :
                     <div/>