WebM thingy, broken css please fix

src/pages/conversationPage.jsx

@@ -4,6 +4,7 @@ import '../css/global.css';
 import '../css/textBox.css';
 import '../css/nameBox.css';
 import '../css/conversation.css'
+import { useNavigate, useParams } from 'react-router-dom';
 import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
@@ -11,9 +12,13 @@ function ConversationPage({data , onClicked}) {
   const [name] = useState(() => {
     return sessionStorage.getItem("name") || '';
   });
+  const { char } = useParams();
 
   const DialogText = data.text.replace("{name}", name);
   const DialogName = data.name.replace("{name}", name);
+  const videoPath = `https://dl.techtransthai.org/fsob-assets/F_${char}_normal.webm`;
+  // https://dl.techtransthai.org/fsob-assets/F_Porsche_normal.webm
+  console.log(data.sprite);
 
   return (
     <div
@@ -31,7 +36,10 @@ function ConversationPage({data , onClicked}) {
       }}
     >
       <div className='spriteBox'>
-        <Animation src={`F${data.sprite}`}/>
+        <video width="200%" height="200%" autoPlay loop muted>
+          <source src={videoPath} type="video/webm" />
+          Your browser does not support the video tag.
+        </video>
       </div>
       <div style={{width:'60vw'}}>
         <div className='nameBox title'>