fix: embedding size (#3042)

Helps fill full width, this should work in most cases Hardcoding oembed return to match youtube - sounds like that's the min height/width which sin't too important.
OdyseeTeam · Jan 18, 2024 · 394bd14 · 394bd14
1 parent a54831b
commit 394bd14
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/ui/util/web.js b/ui/util/web.js
@@ -41,11 +41,11 @@ function generateEmbedUrlEncoded(claimUri, startTime, referralLink) {
 }
 
 function generateEmbedIframeData(src) {
-  const width = '560';
-  const height = '315';
-  const html = `<iframe id="odysee-iframe" width="${width}" height="${height}" src="${src}" allowfullscreen></iframe>`;
+  const width = '100%';
+  const ratio = '16 / 9';
+  const html = `<iframe id="odysee-iframe" style="width:${width}; aspect-ratio:${ratio};" src="${src}" allowfullscreen></iframe>`;
 
-  return { html, width, height };
+  return { html };
 }
 
 function generateDownloadUrl(claimName, claimId) {

diff --git a/web/src/oEmbed.js b/web/src/oEmbed.js
@@ -56,7 +56,7 @@ function generateOEmbedData(claim, embedlyReferrer, timestamp, referral) {
   const videoUrl =
     embedUrl + (embedlyReferrer ? `referrer=${encodeURIComponent(escapeHtmlProperty(embedlyReferrer))}` : '');
 
-  const { html, width, height } = generateEmbedIframeData(videoUrl);
+  const { html } = generateEmbedIframeData(videoUrl);
 
   return {
     type: 'video',
@@ -70,8 +70,8 @@ function generateOEmbedData(claim, embedlyReferrer, timestamp, referral) {
     thumbnail_width: THUMBNAIL_WIDTH,
     thumbnail_height: THUMBNAIL_HEIGHT,
     html: html,
-    width: width,
-    height: height,
+    width: 200, // hardcoded to match youtube, this is min width
+    height: 113, // hardcoded to match youtube, this is min height
   };
 }