add youtube video regexp and visualisation

frontend/src/components/chatPage/VideoMessage.jsx

@@ -0,0 +1,7 @@
+
+
+
+
+
+
+

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -66,9 +66,22 @@ export const MessageForm = () => {
                             }}
                             className={ 
                                 (item.userName === user.userName)? 'message myMessage' :'message'}>
+                           
+                           { 
+                           item.text.match(regYoutube) ?
 
+                           <iframe 
+                                width="350" 
+                                height="220" 
+                                src={`https://www.youtube.com/embed/`+ (item.text.match(regYoutube)[1])}
+                                title="YouTube video player" 
+                                frameborder="0" 
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                                allowfullscreen> 
+                            </iframe>
+                            :
                             <p>{item.text}</p>  
-
+                           }
                         </div>
                         <div className={ 
                                 (item.userName === user.userName)? 'myDate' :'date'}>