From 2fdd42087aa7bc67e8a571e1cbcf630386133828 Mon Sep 17 00:00:00 2001
From: Dessalines <dessalines@users.noreply.github.com>
Date: Tue, 27 Aug 2024 15:35:12 -0400
Subject: [PATCH] Fixing peertube and ordinary video embeds. (#2676)

- Fixes #709
---
 src/shared/components/post/post-listing.tsx | 34 +++++++++++++++------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 1900ae3c..fd51f2fd 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -187,6 +187,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             {this.showBody && post.url && post.embed_title && (
               <MetadataCard post={post} />
             )}
+            {this.showBody && this.videoBlock}
             {this.showBody && this.body()}
           </>
         ) : (
@@ -238,29 +239,44 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       </div>
     );
   }
-  get img() {
-    const { post } = this.postView;
-    const { url } = post;
 
-    if (this.isoData.showAdultConsentModal) {
-      return <></>;
-    }
+  get videoBlock() {
+    const post = this.postView.post;
+    const url = post.url;
 
     // if direct video link or embedded video link
-    if (url && (isVideo(url) || post.embed_video_url)) {
+    if (url && isVideo(url)) {
       return (
-        <div className="embed-responsive ratio ratio-16x9 mt-3">
+        <div className="ratio ratio-16x9 mt-3">
           <video
             onLoadStart={linkEvent(this, this.handleVideoLoadStart)}
             onPlay={linkEvent(this, this.handleVideoLoadStart)}
             onVolumeChange={linkEvent(this, this.handleVideoVolumeChange)}
             controls
-            className="embed-responsive-item col-12"
           >
             <source src={post.embed_video_url ?? url} type="video/mp4" />
           </video>
         </div>
       );
+    } else if (post.embed_video_url) {
+      return (
+        <div className="ratio ratio-16x9 mt-3">
+          <iframe
+            title="video embed"
+            src={post.embed_video_url}
+            sandbox="allow-same-origin allow-scripts"
+            allowFullScreen={true}
+          ></iframe>
+        </div>
+      );
+    }
+  }
+
+  get img() {
+    const { post } = this.postView;
+
+    if (this.isoData.showAdultConsentModal) {
+      return <></>;
     }
 
     if (this.imageSrc) {