From 935e65221118931de9724df07d7a5719b9800d76 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 10 Sep 2023 13:43:33 +0200
Subject: [PATCH] update embeds p/all, p/subscriptions

---
 src/components/views/All.jsx           | 560 ++++++++++++++-----------
 src/components/views/Board.jsx         |   4 +-
 src/components/views/Subscriptions.jsx | 560 ++++++++++++++-----------
 src/components/views/Thread.jsx        |   4 +-
 4 files changed, 624 insertions(+), 504 deletions(-)

diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index 6fd6979d..a45db8ed 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -16,6 +16,7 @@ import EditModal from '../modals/EditModal';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
+import Embed from '../Embed';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -709,110 +710,106 @@ const All = () => {
                         <hr key={`hr-${index}`} />
                         <div key={`pi-${index}`} className="post-info">
                         {commentMediaInfo?.url ? (
-                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                              <div key={`ft-${index}`} className="file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                                rel="noopener noreferrer">{
-                                commentMediaInfo?.url.length > 30 ?
-                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                                commentMediaInfo?.url
-                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                                {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
-                                  <span>
-                                    -[
-                                      <span className='reply-link' 
-                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                      onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
-                                    ]
-                                  </span>
-                                ) : null}
-                              </div>
-                              {commentMediaInfo?.type === 'iframe' && (
-                                <div key={`enlarge-${index}`}
-                                className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                    {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                      <iframe 
-                                        className='enlarged'
-                                        key={`fti-${index}`} 
-                                        src={commentMediaInfo.embedUrl}
-                                        width={commentMediaInfo.thumbnail ? "560" : "250"} 
-                                        height="315"
-                                        style={{border: "none"}}
-                                        title="Embedded content"
-                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                        allowFullScreen />
-                                    ) : (
-                                      <img 
-                                        key={`fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'thread')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                  </span>
-                                </div>
+                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                            <div key={`ft-${index}`} className="file-text">
+                              Link:&nbsp;
+                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                              rel="noopener noreferrer">{
+                              commentMediaInfo?.url.length > 30 ?
+                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                              commentMediaInfo?.url
+                              }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
+                              {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                                <span>
+                                  [
+                                    <span className='reply-link' 
+                                    style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}>
+                                      {isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                    </span>
+                                  ]
+                                </span>
                               )}
-                              {commentMediaInfo?.type === "webpage" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
-                                    {thread.thumbnailUrl ? (
-                                      <img key={`fti-${index}`} 
-                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    ) : null}
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "image" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                    <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                    style={{cursor: "pointer"}}
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "video" ? (
-                              <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                  {isThreadThumbnailClicked[index] ? (
-                                    <video 
-                                      className='enlarged'
-                                      key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} 
-                                      controls
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  ) : (
-                                    <video 
+                            </div>
+                            {commentMediaInfo?.type === 'iframe' && (
+                              <div key={`enlarge-${index}`}
+                              className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                <span key={`fta-${index}`} className="file-thumb" style={
+                                  isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ? 
+                                  {} : {width: displayWidth, height: displayHeight
+                                  }}>
+                                  {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                    <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
+                                  ) : commentMediaInfo.thumbnail ? (
+                                    <img 
                                       key={`fti-${index}`}
-                                      src={commentMediaInfo.url} 
+                                      src={commentMediaInfo.thumbnail} 
                                       alt="thumbnail"
                                       onClick={() => {handleThumbnailClick(index, 'thread')}}
                                       style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  )}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
                                 </span>
                               </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "audio" ? (
+                            )}
+                            {commentMediaInfo?.type === "webpage" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
+                                <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
+                                  {thread.thumbnailUrl ? (
+                                    <img key={`fti-${index}`} 
+                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
+                                </span>
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
                                 <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                  <audio controls key={`fti-${index}`} 
+                                  <img key={`fti-${index}`} 
                                   src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                  onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 </span>
-                              ) : null}
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                            <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                              <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
+                                {isThreadThumbnailClicked[index] ? (
+                                  <video 
+                                    className='enlarged'
+                                    key={`fti-${index}`} 
+                                    src={commentMediaInfo.url} 
+                                    controls
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                ) : (
+                                  <video 
+                                    key={`fti-${index}`}
+                                    src={commentMediaInfo.url} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                )}
+                              </span>
                             </div>
-                          ) : null}
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <audio controls key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                          </div>
+                        ) : null}
                           <span key={`nb-${index}`} className="name-block">
                             {thread.title ? (
                               thread.title.length > 75 ?
@@ -1420,33 +1417,53 @@ const All = () => {
                               </div>
                             </div>
                             {replyMediaInfo?.url ? (
-                              <div key={`f-${index}`} className="file" 
-                              style={{marginBottom: "5px"}}>
-                                <div key={`ft-${index}`} className="reply-file-text">
+                              <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                                <div key={`ft-${index}`} className="file-text">
                                   Link:&nbsp;
                                   <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
                                   rel="noopener noreferrer">{
                                   replyMediaInfo?.url.length > 30 ?
                                   replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                   replyMediaInfo?.url
-                                  }</a>&nbsp;({replyMediaInfo?.type})
-                                  {replyMediaInfo?.type === "video" ||  replyMediaInfo?.type === "iframe" ? (
-                                    isReplyThumbnailClicked[index] ? (
-                                      <span>
-                                        -[
-                                          <span className='reply-link' 
-                                          style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                          onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
-                                        ]
-                                      </span>) 
-                                    : null)
-                                  : null}
+                                  }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
+                                  { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                    <span>
+                                      [
+                                        <span className='reply-link' 
+                                        style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                        onClick={() => {handleThumbnailClick(index, 'reply')}}>
+                                          {isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                        </span>
+                                      ]
+                                    </span>
+                                  )}
                                 </div>
-                                {replyMediaInfo?.type === "webpage" ? (
-                                  <div key={`enlarge-reply-${index}`} className="img-container">
+                                {replyMediaInfo?.type === 'iframe' && (
+                                  <div key={`enlarge-${index}`}
+                                  className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                    <span key={`fta-${index}`} className="file-thumb-reply" style={
+                                      isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ? 
+                                      {} : {width: replyDisplayWidth, height: replyDisplayHeight
+                                      }}>
+                                      {isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                        <Embed url={replyMediaInfo.url} key={`fti-${index}`} />
+                                      ) : replyMediaInfo.thumbnail ? (
+                                        <img 
+                                          key={`fti-${index}`}
+                                          src={replyMediaInfo.thumbnail} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : null}
+                                    </span>
+                                  </div>
+                                )}
+                                {replyMediaInfo?.type === "webpage" && (
+                                  <div key={`enlarge-${index}`} className="img-container">
                                     <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
                                       {reply.thumbnailUrl ? (
-                                        <img key={`fti-${index}`}
+                                        <img key={`fti-${index}`} 
                                         src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
                                         onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
                                         style={{cursor: "pointer"}}
@@ -1454,51 +1471,50 @@ const All = () => {
                                       ) : null}
                                     </span>
                                   </div>
-                                ) : null}
-                                {replyMediaInfo?.type === "image" ? (
-                                  <div key={`enlarge-reply-${index}`} className="img-container">
+                                )}
+                                {replyMediaInfo?.type === "image" && (
+                                  <div key={`enlarge-${index}`} className="img-container">
                                     <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                      <img key={`fti-${index}`}
-                                      src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                      <img key={`fti-${index}`} 
+                                      src={replyMediaInfo.url} alt={replyMediaInfo.type}
                                       onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
                                       style={{cursor: "pointer"}}
                                       onError={(e) => e.target.src = fallbackImgUrl} />
                                     </span>
                                   </div>
-                                ) : null}
-                                {replyMediaInfo?.type === "video" ? (
-                                  <div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                  <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                    {isReplyThumbnailClicked[index] ? (
-                                      <video controls
-                                        className='enlarged'
-                                        key={`fti-${index}`} 
-                                        src={replyMediaInfo.url} 
-                                        alt={replyMediaInfo.type} 
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} 
-                                      />
-                                    ) : (
-                                      <video
-                                        key={`fti-${index}`} 
-                                        src={replyMediaInfo.url}
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'reply')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} 
-                                      />
-                                    )}
-                                  </span>
-                                </div>
-                                ) : null}
-                                {replyMediaInfo?.type === "audio" ? (
-                                  <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                    <audio controls 
-                                    key={`fti-${index}`}
-                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                )}
+                                {replyMediaInfo?.type === "video" && (
+                                  <div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                    <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
+                                      {isReplyThumbnailClicked[index] ? (
+                                        <video 
+                                          className='enlarged'
+                                          key={`fti-${index}`} 
+                                          src={replyMediaInfo.url} 
+                                          controls
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={replyMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                    </span>
+                                  </div>
+                                )}
+                                {replyMediaInfo?.type === "audio" && (
+                                  <span key={`fta-${index}`} className="file-thumb-reply">
+                                    <audio controls key={`fti-${index}`} 
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type}
                                     onError={(e) => e.target.src = fallbackImgUrl} />
                                   </span>
-                                ) : null}
+                                )}
                               </div>
                             ) : null}
                             {reply.content ? (
@@ -1819,108 +1835,102 @@ const All = () => {
                           </span>
                         </div>
                         {thread.link ? (
-                            <div key={`mob-f-${index}`} className="file-mobile">
-                              {commentMediaInfo?.type === 'iframe' && (
-                                <div key={`enlarge-mob-${index}`} className="img-container">
-                                  <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                    {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                      <div style={{width: "92vw"}}>
-                                        <iframe 
-                                          key={`mob-fti-${index}`} 
-                                          src={commentMediaInfo.embedUrl}
-                                          style={{border: "none", height: "250px"}}
-                                          title="Embedded content"
-                                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                          allowFullScreen />
+                          <div key={`mob-f-${index}`} className="file-mobile">
+                            {commentMediaInfo?.type === 'iframe' && (
+                              <div key={`enlarge-mob-${index}`} className="img-container">
+                                <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                  {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                    <div style={{width: "92vw"}}>
+                                      <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
+                                    </div>
+                                  ) : commentMediaInfo.thumbnail ? (
+                                    <img 
+                                      key={`mob-fti-${index}`}
+                                      src={commentMediaInfo.thumbnail} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
+                                  {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
+                                    isMobileThreadThumbnailClicked[index] ? (
+                                      <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                        <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                        onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                        >Close</span>
                                       </div>
                                     ) : (
-                                      <img 
-                                        key={`mob-fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                    {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
-                                      isMobileThreadThumbnailClicked[index] ? (
-                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                          onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                          >Close</span>
-                                        </div>
-                                      ) : (
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                                  </span>
-                                </div>
-                              )}
-                                {commentMediaInfo?.url ? (
-                                  commentMediaInfo.type === "webpage" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        {thread.thumbnailUrl ? (
-                                          <img key={`mob-img-${index}`} 
-                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
-                                          onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : null}
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "image" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                  )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                                </span>
+                              </div>
+                            )}
+                              {commentMediaInfo?.url ? (
+                                commentMediaInfo.type === "webpage" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      {thread.thumbnailUrl ? (
                                         <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
                                         onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                        {isMobileThreadThumbnailClicked[index] ? (
-                                          <video key={`fti-${index}`} 
-                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                          controls
-                                          style={{ cursor: 'pointer' }} 
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : (
-                                          <video 
-                                            key={`fti-${index}`}
-                                            src={commentMediaInfo.url} 
-                                            alt="thumbnail"
-                                            onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                            style={{cursor: "pointer"}}
-                                            id="video-thumbnail-mobile"
-                                            onError={(e) => e.target.src = fallbackImgUrl} 
-                                          />
-                                        )}
-                                        {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
-                                          isMobileThreadThumbnailClicked[index] ? (
-                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                              onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                              >Close</span>
-                                            </div>
-                                          ) : (
-                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                                      </span>
-                                  ) : commentMediaInfo.type === "audio" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        <audio key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      ) : null}
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "image" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <img key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {isMobileThreadThumbnailClicked[index] ? (
+                                        <video key={`fti-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                        controls
+                                        style={{ cursor: 'pointer' }} 
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                  ) : null
-                                ) : null}
-                            </div>
-                          ) : null}
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={commentMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                          style={{cursor: "pointer"}}
+                                          id="video-thumbnail-mobile"
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                      {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
+                                        isMobileThreadThumbnailClicked[index] ? (
+                                          <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                            <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                            onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                            >Close</span>
+                                          </div>
+                                        ) : (
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                    </span>
+                                ) : commentMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <audio key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                ) : null
+                              ) : null}
+                          </div>
+                        ) : null}
                         {thread.content ? (
                           thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${index}`}>
@@ -2065,7 +2075,35 @@ const All = () => {
                           {reply.link ? (
                             <div key={`mob-f-${index}`} className="file-mobile">
                                 {replyMediaInfo?.url ? (
-                                  replyMediaInfo.type === "webpage" ? (
+                                  replyMediaInfo.type === "iframe" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                        {(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                          <div style={{width: "92vw"}}>
+                                            <Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
+                                          </div>
+                                        ) : replyMediaInfo.thumbnail ? (
+                                          <img 
+                                            key={`mob-fti-${index}`}
+                                            src={replyMediaInfo.thumbnail} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                            style={{cursor: "pointer"}}
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
+                                        {replyMediaInfo?.type === "video" || replyMediaInfo?.type ===  "iframe" ? (
+                                          isMobileReplyThumbnailClicked[index] ? (
+                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                              onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                              >Close</span>
+                                            </div>
+                                          ) : (
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                                      </span>
+                                    </div>
+                                  ) : replyMediaInfo.type === "webpage" ? (
                                     <div key={`enlarge-mob-reply-${index}`} className="img-container">
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                         {reply.thumbnailUrl ? (
@@ -2090,13 +2128,35 @@ const All = () => {
                                       </span>
                                     </div>
                                   ) : replyMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
-                                          <video key={`fti-${index}`} 
-                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                          style={{ pointerEvents: "none" }}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                      </span>
+                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {isMobileReplyThumbnailClicked[index] ? (
+                                        <video key={`fti-${index}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type}
+                                        controls
+                                        style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}} 
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={replyMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                          style={{cursor: "pointer"}}
+                                          id="video-thumbnail-mobile"
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                      {replyMediaInfo?.type === "video" ||  replyMediaInfo?.type === "iframe" ? (
+                                        isMobileReplyThumbnailClicked[index] ? (
+                                          <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                            <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                            onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                            >Close</span>
+                                          </div>
+                                        ) : (
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                    </span>
                                   ) : replyMediaInfo.type === "audio" ? (
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                         <audio key={`mob-img-${index}`} 
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 5134adfb..6cf06658 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -1415,7 +1415,7 @@ const Board = () => {
                                     commentMediaInfo?.url.slice(0, 30) + "(...)" :
                                     commentMediaInfo?.url
                                     }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
-                                    { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                                    {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                                       <span>
                                         [
                                           <span className='reply-link' 
@@ -2119,7 +2119,7 @@ const Board = () => {
                                           replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                           replyMediaInfo?.url
                                           }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
-                                          { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                          { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
                                             <span>
                                               [
                                                 <span className='reply-link' 
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index ac79c683..8ef61c22 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -17,6 +17,7 @@ import EditModal from '../modals/EditModal';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
 import ModerationModal from '../modals/ModerationModal';
+import Embed from '../Embed';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -720,110 +721,106 @@ const Subscriptions = () => {
                         <hr key={`hr-${index}`} />
                         <div key={`pi-${index}`} className="post-info">
                         {commentMediaInfo?.url ? (
-                            <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
-                              <div key={`ft-${index}`} className="file-text">
-                                Link:&nbsp;
-                                <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
-                                rel="noopener noreferrer">{
-                                commentMediaInfo?.url.length > 30 ?
-                                commentMediaInfo?.url.slice(0, 30) + "(...)" :
-                                commentMediaInfo?.url
-                                }</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
-                                {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? (
-                                  <span>
-                                    -[
-                                      <span className='reply-link' 
-                                      style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                      onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
-                                    ]
-                                  </span>
-                                ) : null}
-                              </div>
-                              {commentMediaInfo?.type === 'iframe' && (
-                                <div key={`enlarge-${index}`}
-                                className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                    {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                      <iframe 
-                                        className='enlarged'
-                                        key={`fti-${index}`} 
-                                        src={commentMediaInfo.embedUrl}
-                                        width={commentMediaInfo.thumbnail ? "560" : "250"} 
-                                        height="315"
-                                        style={{border: "none"}}
-                                        title="Embedded content"
-                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                        allowFullScreen />
-                                    ) : (
-                                      <img 
-                                        key={`fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'thread')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                  </span>
-                                </div>
+                          <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                            <div key={`ft-${index}`} className="file-text">
+                              Link:&nbsp;
+                              <a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank"
+                              rel="noopener noreferrer">{
+                              commentMediaInfo?.url.length > 30 ?
+                              commentMediaInfo?.url.slice(0, 30) + "(...)" :
+                              commentMediaInfo?.url
+                              }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
+                              {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                                <span>
+                                  [
+                                    <span className='reply-link' 
+                                    style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}>
+                                      {isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                    </span>
+                                  ]
+                                </span>
                               )}
-                              {commentMediaInfo?.type === "webpage" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
-                                    {thread.thumbnailUrl ? (
-                                      <img key={`fti-${index}`} 
-                                      src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
-                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} />
-                                    ) : null}
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "image" ? (
-                                <div key={`enlarge-${index}`} className="img-container">
-                                  <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                    <img key={`fti-${index}`} 
-                                    src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
-                                    style={{cursor: "pointer"}}
-                                    onError={(e) => e.target.src = fallbackImgUrl} />
-                                  </span>
-                                </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "video" ? (
-                              <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                  {isThreadThumbnailClicked[index] ? (
-                                    <video 
-                                      className='enlarged'
-                                      key={`fti-${index}`} 
-                                      src={commentMediaInfo.url} 
-                                      controls
-                                      style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  ) : (
-                                    <video 
+                            </div>
+                            {commentMediaInfo?.type === 'iframe' && (
+                              <div key={`enlarge-${index}`}
+                              className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                <span key={`fta-${index}`} className="file-thumb" style={
+                                  isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ? 
+                                  {} : {width: displayWidth, height: displayHeight
+                                  }}>
+                                  {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                    <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
+                                  ) : commentMediaInfo.thumbnail ? (
+                                    <img 
                                       key={`fti-${index}`}
-                                      src={commentMediaInfo.url} 
+                                      src={commentMediaInfo.thumbnail} 
                                       alt="thumbnail"
                                       onClick={() => {handleThumbnailClick(index, 'thread')}}
                                       style={{cursor: "pointer"}}
-                                      onError={(e) => e.target.src = fallbackImgUrl} 
-                                    />
-                                  )}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
                                 </span>
                               </div>
-                              ) : null}
-                              {commentMediaInfo?.type === "audio" ? (
+                            )}
+                            {commentMediaInfo?.type === "webpage" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
+                                <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidth, height: displayHeight}}>
+                                  {thread.thumbnailUrl ? (
+                                    <img key={`fti-${index}`} 
+                                    src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
+                                    onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : null}
+                                </span>
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "image" ? (
+                              <div key={`enlarge-${index}`} className="img-container">
                                 <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
-                                  <audio controls key={`fti-${index}`} 
+                                  <img key={`fti-${index}`} 
                                   src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                  onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
+                                  style={{cursor: "pointer"}}
                                   onError={(e) => e.target.src = fallbackImgUrl} />
                                 </span>
-                              ) : null}
+                              </div>
+                            ) : null}
+                            {commentMediaInfo?.type === "video" ? (
+                            <div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                              <span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}>
+                                {isThreadThumbnailClicked[index] ? (
+                                  <video 
+                                    className='enlarged'
+                                    key={`fti-${index}`} 
+                                    src={commentMediaInfo.url} 
+                                    controls
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                ) : (
+                                  <video 
+                                    key={`fti-${index}`}
+                                    src={commentMediaInfo.url} 
+                                    alt="thumbnail"
+                                    onClick={() => {handleThumbnailClick(index, 'thread')}}
+                                    style={{cursor: "pointer"}}
+                                    onError={(e) => e.target.src = fallbackImgUrl} 
+                                  />
+                                )}
+                              </span>
                             </div>
-                          ) : null}
+                            ) : null}
+                            {commentMediaInfo?.type === "audio" ? (
+                              <span key={`fta-${index}`} className="file-thumb">
+                                <audio controls key={`fti-${index}`} 
+                                src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              </span>
+                            ) : null}
+                          </div>
+                        ) : null}
                           <span key={`nb-${index}`} className="name-block">
                             {thread.title ? (
                               thread.title.length > 75 ?
@@ -1431,33 +1428,53 @@ const Subscriptions = () => {
                               </div>
                             </div>
                             {replyMediaInfo?.url ? (
-                              <div key={`f-${index}`} className="file" 
-                              style={{marginBottom: "5px"}}>
-                                <div key={`ft-${index}`} className="reply-file-text">
+                              <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
+                                <div key={`ft-${index}`} className="file-text">
                                   Link:&nbsp;
                                   <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
                                   rel="noopener noreferrer">{
                                   replyMediaInfo?.url.length > 30 ?
                                   replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                   replyMediaInfo?.url
-                                  }</a>&nbsp;({replyMediaInfo?.type})
-                                  {replyMediaInfo?.type === "video" ||  replyMediaInfo?.type === "iframe" ? (
-                                    isReplyThumbnailClicked[index] ? (
-                                      <span>
-                                        -[
-                                          <span className='reply-link' 
-                                          style={{textDecoration: 'underline', cursor: 'pointer'}}
-                                          onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
-                                        ]
-                                      </span>) 
-                                    : null)
-                                  : null}
+                                  }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
+                                  { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                    <span>
+                                      [
+                                        <span className='reply-link' 
+                                        style={{textDecoration: 'underline', cursor: 'pointer'}}
+                                        onClick={() => {handleThumbnailClick(index, 'reply')}}>
+                                          {isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
+                                        </span>
+                                      ]
+                                    </span>
+                                  )}
                                 </div>
-                                {replyMediaInfo?.type === "webpage" ? (
-                                  <div key={`enlarge-reply-${index}`} className="img-container">
+                                {replyMediaInfo?.type === 'iframe' && (
+                                  <div key={`enlarge-${index}`}
+                                  className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                    <span key={`fta-${index}`} className="file-thumb-reply" style={
+                                      isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ? 
+                                      {} : {width: replyDisplayWidth, height: replyDisplayHeight
+                                      }}>
+                                      {isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                        <Embed url={replyMediaInfo.url} key={`fti-${index}`} />
+                                      ) : replyMediaInfo.thumbnail ? (
+                                        <img 
+                                          key={`fti-${index}`}
+                                          src={replyMediaInfo.thumbnail} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : null}
+                                    </span>
+                                  </div>
+                                )}
+                                {replyMediaInfo?.type === "webpage" && (
+                                  <div key={`enlarge-${index}`} className="img-container">
                                     <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
                                       {reply.thumbnailUrl ? (
-                                        <img key={`fti-${index}`}
+                                        <img key={`fti-${index}`} 
                                         src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
                                         onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
                                         style={{cursor: "pointer"}}
@@ -1465,51 +1482,50 @@ const Subscriptions = () => {
                                       ) : null}
                                     </span>
                                   </div>
-                                ) : null}
-                                {replyMediaInfo?.type === "image" ? (
-                                  <div key={`enlarge-reply-${index}`} className="img-container">
+                                )}
+                                {replyMediaInfo?.type === "image" && (
+                                  <div key={`enlarge-${index}`} className="img-container">
                                     <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                      <img key={`fti-${index}`}
-                                      src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                      <img key={`fti-${index}`} 
+                                      src={replyMediaInfo.url} alt={replyMediaInfo.type}
                                       onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
                                       style={{cursor: "pointer"}}
                                       onError={(e) => e.target.src = fallbackImgUrl} />
                                     </span>
                                   </div>
-                                ) : null}
-                                {replyMediaInfo?.type === "video" ? (
-                                  <div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
-                                  <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                    {isReplyThumbnailClicked[index] ? (
-                                      <video controls
-                                        className='enlarged'
-                                        key={`fti-${index}`} 
-                                        src={replyMediaInfo.url} 
-                                        alt={replyMediaInfo.type} 
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} 
-                                      />
-                                    ) : (
-                                      <video
-                                        key={`fti-${index}`} 
-                                        src={replyMediaInfo.url}
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'reply')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} 
-                                      />
-                                    )}
-                                  </span>
-                                </div>
-                                ) : null}
-                                {replyMediaInfo?.type === "audio" ? (
-                                  <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
-                                    <audio controls 
-                                    key={`fti-${index}`}
-                                    src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                )}
+                                {replyMediaInfo?.type === "video" && (
+                                  <div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
+                                    <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
+                                      {isReplyThumbnailClicked[index] ? (
+                                        <video 
+                                          className='enlarged'
+                                          key={`fti-${index}`} 
+                                          src={replyMediaInfo.url} 
+                                          controls
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={replyMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'reply')}}
+                                          style={{cursor: "pointer"}}
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                    </span>
+                                  </div>
+                                )}
+                                {replyMediaInfo?.type === "audio" && (
+                                  <span key={`fta-${index}`} className="file-thumb-reply">
+                                    <audio controls key={`fti-${index}`} 
+                                    src={replyMediaInfo.url} alt={replyMediaInfo.type}
                                     onError={(e) => e.target.src = fallbackImgUrl} />
                                   </span>
-                                ) : null}
+                                )}
                               </div>
                             ) : null}
                             {reply.content ? (
@@ -1830,108 +1846,102 @@ const Subscriptions = () => {
                           </span>
                         </div>
                         {thread.link ? (
-                            <div key={`mob-f-${index}`} className="file-mobile">
-                              {commentMediaInfo?.type === 'iframe' && (
-                                <div key={`enlarge-mob-${index}`} className="img-container">
-                                  <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                    {(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
-                                      <div style={{width: "92vw"}}>
-                                        <iframe 
-                                          key={`mob-fti-${index}`} 
-                                          src={commentMediaInfo.embedUrl}
-                                          style={{border: "none", height: "250px"}}
-                                          title="Embedded content"
-                                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                          allowFullScreen />
+                          <div key={`mob-f-${index}`} className="file-mobile">
+                            {commentMediaInfo?.type === 'iframe' && (
+                              <div key={`enlarge-mob-${index}`} className="img-container">
+                                <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                  {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
+                                    <div style={{width: "92vw"}}>
+                                      <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
+                                    </div>
+                                  ) : commentMediaInfo.thumbnail ? (
+                                    <img 
+                                      key={`mob-fti-${index}`}
+                                      src={commentMediaInfo.thumbnail} 
+                                      alt="thumbnail"
+                                      onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                  ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
+                                  {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
+                                    isMobileThreadThumbnailClicked[index] ? (
+                                      <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                        <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                        onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                        >Close</span>
                                       </div>
                                     ) : (
-                                      <img 
-                                        key={`mob-fti-${index}`}
-                                        src={commentMediaInfo.thumbnail} 
-                                        alt="thumbnail"
-                                        onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                        style={{cursor: "pointer"}}
-                                        onError={(e) => e.target.src = fallbackImgUrl} />
-                                    )}
-                                    {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
-                                      isMobileThreadThumbnailClicked[index] ? (
-                                        <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                          <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                          onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                          >Close</span>
-                                        </div>
-                                      ) : (
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                    )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                                  </span>
-                                </div>
-                              )}
-                                {commentMediaInfo?.url ? (
-                                  commentMediaInfo.type === "webpage" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        {thread.thumbnailUrl ? (
-                                          <img key={`mob-img-${index}`} 
-                                          src={commentMediaInfo.thumbnail} alt="thumbnail" 
-                                          onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
-                                          style={{cursor: "pointer"}}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : null}
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "image" ? (
-                                    <div key={`enlarge-mob-${index}`} className="img-container">
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                  )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                                </span>
+                              </div>
+                            )}
+                              {commentMediaInfo?.url ? (
+                                commentMediaInfo.type === "webpage" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] || !thread.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      {thread.thumbnailUrl ? (
                                         <img key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                        src={commentMediaInfo.thumbnail} alt="thumbnail" 
                                         onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
                                         style={{cursor: "pointer"}}
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                    </div>
-                                  ) : commentMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
-                                        {isMobileThreadThumbnailClicked[index] ? (
-                                          <video key={`fti-${index}`} 
-                                          src={commentMediaInfo.url} alt={commentMediaInfo.type}
-                                          controls
-                                          style={{ cursor: 'pointer' }} 
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        ) : (
-                                          <video 
-                                            key={`fti-${index}`}
-                                            src={commentMediaInfo.url} 
-                                            alt="thumbnail"
-                                            onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                            style={{cursor: "pointer"}}
-                                            id="video-thumbnail-mobile"
-                                            onError={(e) => e.target.src = fallbackImgUrl} 
-                                          />
-                                        )}
-                                        {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
-                                          isMobileThreadThumbnailClicked[index] ? (
-                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
-                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
-                                              onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
-                                              >Close</span>
-                                            </div>
-                                          ) : (
-                                            <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
-                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
-                                      </span>
-                                  ) : commentMediaInfo.type === "audio" ? (
-                                      <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
-                                        <audio key={`mob-img-${index}`} 
-                                        src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      ) : null}
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "image" ? (
+                                  <div key={`enlarge-mob-${index}`} className="img-container">
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <img key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
+                                      style={{cursor: "pointer"}}
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                  </div>
+                                ) : commentMediaInfo.type === "video" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {isMobileThreadThumbnailClicked[index] ? (
+                                        <video key={`fti-${index}`} 
+                                        src={commentMediaInfo.url} alt={commentMediaInfo.type}
+                                        controls
+                                        style={{ cursor: 'pointer' }} 
                                         onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
-                                      </span>
-                                  ) : null
-                                ) : null}
-                            </div>
-                          ) : null}
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={commentMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                          style={{cursor: "pointer"}}
+                                          id="video-thumbnail-mobile"
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                      {commentMediaInfo?.type === "video" || commentMediaInfo?.type ===  "iframe" ? (
+                                        isMobileThreadThumbnailClicked[index] ? (
+                                          <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                            <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                            onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
+                                            >Close</span>
+                                          </div>
+                                        ) : (
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                    </span>
+                                ) : commentMediaInfo.type === "audio" ? (
+                                    <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile, marginBottom: '25px'}}>
+                                      <audio key={`mob-img-${index}`} 
+                                      src={commentMediaInfo.url} alt={commentMediaInfo.type} 
+                                      onError={(e) => e.target.src = fallbackImgUrl} />
+                                      <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
+                                    </span>
+                                ) : null
+                              ) : null}
+                          </div>
+                        ) : null}
                         {thread.content ? (
                           thread.content?.length > 500 ?
                           <Fragment key={`fragment12-${index}`}>
@@ -2076,7 +2086,35 @@ const Subscriptions = () => {
                           {reply.link ? (
                             <div key={`mob-f-${index}`} className="file-mobile">
                                 {replyMediaInfo?.url ? (
-                                  replyMediaInfo.type === "webpage" ? (
+                                  replyMediaInfo.type === "iframe" ? (
+                                    <div key={`enlarge-mob-${index}`} className="img-container">
+                                      <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                        {(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
+                                          <div style={{width: "92vw"}}>
+                                            <Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
+                                          </div>
+                                        ) : replyMediaInfo.thumbnail ? (
+                                          <img 
+                                            key={`mob-fti-${index}`}
+                                            src={replyMediaInfo.thumbnail} 
+                                            alt="thumbnail"
+                                            onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                            style={{cursor: "pointer"}}
+                                            onError={(e) => e.target.src = fallbackImgUrl} />
+                                        ) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
+                                        {replyMediaInfo?.type === "video" || replyMediaInfo?.type ===  "iframe" ? (
+                                          isMobileReplyThumbnailClicked[index] ? (
+                                            <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                              <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                              onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                              >Close</span>
+                                            </div>
+                                          ) : (
+                                            <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
+                                        )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
+                                      </span>
+                                    </div>
+                                  ) : replyMediaInfo.type === "webpage" ? (
                                     <div key={`enlarge-mob-reply-${index}`} className="img-container">
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                         {reply.thumbnailUrl ? (
@@ -2101,13 +2139,35 @@ const Subscriptions = () => {
                                       </span>
                                     </div>
                                   ) : replyMediaInfo.type === "video" ? (
-                                      <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
-                                          <video key={`fti-${index}`} 
-                                          src={replyMediaInfo.url} alt={replyMediaInfo.type} 
-                                          style={{ pointerEvents: "none" }}
-                                          onError={(e) => e.target.src = fallbackImgUrl} />
-                                        <div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
-                                      </span>
+                                    <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
+                                      {isMobileReplyThumbnailClicked[index] ? (
+                                        <video key={`fti-${index}`} 
+                                        src={replyMediaInfo.url} alt={replyMediaInfo.type}
+                                        controls
+                                        style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}} 
+                                        onError={(e) => e.target.src = fallbackImgUrl} />
+                                      ) : (
+                                        <video 
+                                          key={`fti-${index}`}
+                                          src={replyMediaInfo.url} 
+                                          alt="thumbnail"
+                                          onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                          style={{cursor: "pointer"}}
+                                          id="video-thumbnail-mobile"
+                                          onError={(e) => e.target.src = fallbackImgUrl} 
+                                        />
+                                      )}
+                                      {replyMediaInfo?.type === "video" ||  replyMediaInfo?.type === "iframe" ? (
+                                        isMobileReplyThumbnailClicked[index] ? (
+                                          <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
+                                            <span className='button-mobile' style={{float: "none", cursor: "pointer"}}
+                                            onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
+                                            >Close</span>
+                                          </div>
+                                        ) : (
+                                          <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
+                                      )) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
+                                    </span>
                                   ) : replyMediaInfo.type === "audio" ? (
                                       <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
                                         <audio key={`mob-img-${index}`} 
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 355aab1d..ad6d0db4 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -871,7 +871,7 @@ const Thread = () => {
                             commentMediaInfo?.url.slice(0, 30) + "(...)" :
                             commentMediaInfo?.url
                             }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
-                            { (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
+                            {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
                               <span>
                                 [
                                   <span className='reply-link' 
@@ -1531,7 +1531,7 @@ const Thread = () => {
                                 replyMediaInfo?.url.slice(0, 30) + "(...)" :
                                 replyMediaInfo?.url
                                 }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
-                                { (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
+                                { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
                                   <span>
                                     [
                                       <span className='reply-link'