docs: Add video

README.md

@@ -5,11 +5,15 @@
 FaceEmo is a facial expression creation and configuration tool for VRChat Avatars 3.0.  
 It allows for easy configuration of facial expression changes using hand gestures and the Expression Menu!
 
+[![video (en)](docs/static/img/readme/video_en.png)](https://www.youtube.com/embed/hZIHdWUONHM?rel=0)
+
 For more information, check out the [documentation](https://suzuryg.github.io/face-emo/).
 
 ---
 
 FaceEmoはVRChat Avatars 3.0用の表情作成・設定ツールです。  
 ハンドジェスチャーとExpression Menuを組み合わせた表情切り替えを簡単に設定できます！
 
+[![video (jp)](docs/static/img/readme/video_jp.png)](https://www.youtube.com/embed/Y3taqFjOjZ8?rel=0)
+
 詳細については[ドキュメント](https://suzuryg.github.io/face-emo/ja/)をご参照ください。

docs/src/components/HomepageFeatures/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import Translate from '@docusaurus/Translate'
+import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function Features() {
   return (
@@ -47,6 +48,22 @@ function Features() {
   );
 }
 
+function VideoContainer() {
+  const { siteConfig, i18n } = useDocusaurusContext();
+  var video_url;
+  if (i18n.currentLocale == "ja") { video_url = "https://www.youtube.com/embed/Y3taqFjOjZ8?rel=0"; }
+  else { video_url = "https://www.youtube.com/embed/hZIHdWUONHM?rel=0"; }
+
+  return (
+  <div className="text--center">
+      <iframe width="640" height="360"
+          src={video_url}
+          frameBorder="0"
+          allowFullScreen
+          sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe>
+  </div>);
+}
+
 function Credits(){
   return(
     <div>
@@ -84,6 +101,8 @@ export default function HomepageFeatures(): JSX.Element {
       <div className="container">
         <Features/>
         <hr/>
+        <VideoContainer/>
+        <hr/>
         <Credits/>
       </div>
     </section>