【Youtube预览】低质量视频预览 | Low quality preview for video (YouTube)

[vlafriday]

你好，我需要你的帮助。为什么当我嵌入 YouTube 上的视频时，网站上的预览分辨率较低？当它出现在概念页面上时，它是高质量的 maxres 吗？我附上链接和截图

Hi, I need your help. Why when I embed a video from youtube preview on a site in low resolution hq? And when it's on the notion page, is there a high quality maxres? I attach links and screenshots

My site: https://www.vlafriday.space/time-for-habits
Notion: https://vlafriday.notion.site/7922659476794bb69ad9108bd215ddb2

My site:

Notion:

请帮帮我
Help please

[tangly1024]

您好，感谢您的反馈。这是项目中的设计，要调整这个设计有一定难度，因为需要修改到底层的组件。我计划在下一个重大版本升级的NotionNext中改善它。

现状是，在react-notion-x这个项目中，（它是决定页面渲染的核心组件），youtube的封面图，被手动地替换成了清晰度、体积更小的jpg格式，相关代码 lite-youtube-embed.tsx#L44
因此：
1.在notion中，youtube的封面读取的是更高清的 webp格式：https://i.ytimg.com/vi_webp/z9cnzGDPBYE/maxresdefault.webp
2.而在网页中，它被体积更小的jpg格式替代： https://i.ytimg.com/vi/z9cnzGDPBYE/hqdefault.jpg

---

Hello, thank you for your feedback. This is part of the project's design, and changing it poses a certain level of complexity as it requires modifications to the core components. I plan to improve this in the next major update of NotionNext.

Currently, in the react-notion-x project (which is the main component determining page rendering), the YouTube thumbnail is manually replaced with a clearer and more compact jpg format for optimization purposes, relevant code lite-youtube-embed.tsx#L44. Therefore:

In Notion, the YouTube thumbnail is loaded in a higher quality webp format: https://i.ytimg.com/vi_webp/z9cnzGDPBYE/maxresdefault.webp
However, on the webpage, it is replaced with a more compact jpg format for optimization: https://i.ytimg.com/vi/z9cnzGDPBYE/hqdefault.jpg

---

Приветствую, спасибо за ваш отзыв. Это часть дизайна проекта, и его изменение представляет определенную сложность, поскольку требует внесения изменений в базовые компоненты. Я планирую улучшить это в следующем крупном обновлении NotionNext.

В настоящее время в проекте react-notion-x (являющемся основным компонентом, определяющим отображение страниц) обложка YouTube вручную заменена на более четкий и компактный формат jpg для оптимизации, ссылка на соответствующий код lite-youtube-embed.tsx#L44. Поэтому:

В Notion обложка YouTube загружается в формате webp более высокого качества: https://i.ytimg.com/vi_webp/z9cnzGDPBYE/maxresdefault.webp
Однако на веб-странице она заменяется более компактным форматом jpg для оптимизации: https://i.ytimg.com/vi/z9cnzGDPBYE/hqdefault.jpg

[vlafriday]

@tangly1024 Can I change (const resolution = 'hqdefault') to (const resolution = 'maxresdefault')? then the picture will be of high quality?
https://github.com/NotionX/react-notion-x/blob/e1f03de6100f2cd33c146eb1c5e67ec4d4afe522/packages/react-notion-x/src/components/lite-youtube-embed.tsx#L43

[tangly1024]

Yes, that's correct. When (const resolution = 'hqdefault') is changed to (const resolution = 'maxresdefault'), the image will become high resolution.

[vlafriday]

Thanks a lot, I'll try. Thank you so much for your work 💪

[vlafriday]

@tangly1024 Hello again, you gave me a link to another project (NotionX/react-notion-x). And I'm asking how to make high-quality previews in your project (NotionNext)?