Adjusted styling and classes

src/app/molecules/media/Media.jsx

@@ -373,6 +373,7 @@ function IframePlayer({
   };
 
   return (
+    <div className="iframeplayer">
       <div className="file-container">
         <div className="file-header">
           <Text className="file-name" variant="b3">{`${sitename} - ${title}`}</Text>
@@ -385,18 +386,18 @@ function IframePlayer({
           />
         </div>
 
-      <div
+        <div className="video-container">
-        className="video-container"
+          {videoStarted ? (
-      >
-        {!videoStarted && <img src={thumbnail} alt={`${sitename} thumbnail`} />}
-        {!videoStarted && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
-
-        {videoStarted && (
             <div>
               {children}
             </div>
+          ) : (
+            <>
+              <img src={thumbnail} alt={`${sitename} thumbnail`} />
+              <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />
+            </>
           )}
-
+        </div>
       </div>
     </div>
   );
@@ -454,17 +455,19 @@ function Embed({ link }) {
     // Image only embed
     if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
       return (
+        <div className="embed-container">
           <div className="file-container">
             {image}
           </div>
+        </div>
       );
     }
 
     const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
 
     return (
-      <div className="file-container">
       <div className="embed-container">
+        <div className="file-container embed">
           <div className="embed-text">
             {(embedTitle != null) && (
               <Text className="embed-title" variant="h2">
@@ -536,6 +539,7 @@ function YoutubeEmbed({ link }) {
 
   if (urlPreviewInfo !== null) {
     return (
+      <div className="embed-container">
         <IframePlayer link={link} sitename="Youtube" title={urlPreviewInfo['og:title']} thumbnail={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}>
           <iframe
             src={embedURL}
@@ -545,6 +549,7 @@ function YoutubeEmbed({ link }) {
             allowFullScreen
           />
         </IframePlayer>
+      </div>
     );
   }
 

src/app/molecules/media/Media.scss

@@ -90,6 +90,9 @@
 }
 
 .embed-container {
+  margin-top: 5px;
+
+  .embed {
     color: var(--tc-surface-low);
     background-color: var(--bg-surface-hover);
     border-radius: calc(var(--bo-radius) / 2);
@@ -98,4 +101,5 @@
     .embed-text {
       margin-bottom: 5px;
     }
+  }
 }