I’m following up on ‘Youtube embed size’. In this topic, the discussion was about the small default size of YouTube embeds. The final solution was allowing width and height parameters in YouTube links. I’m not sure this is a great solution as most forum users will not know about these.
What’s currently the best approach to make YouTube embeds the same size as images?
Somewhat on the same topic, Vimeo embeds are larger than YouTube embeds but still not the same size as images.
This is what we have currently to make YouTube embeds span the full post width:
.lazyYT-container {
height: 0 !important;
width: 100% !important;
padding-bottom: 56.25% !important;
}
IMO this is a big improvement and something like this should just be the default styling!
Not sure how to do the same for Vimeo (but YouTube accounts for probably like 99% of videos shared on our forum so not something we’ve worried about too much…)
Brilliant, thanks!
True enough 
this looks perfect, thank you so much!
Hi there.
I am new here, hence the late reply.
My YouTube videos look small and have a black border, and I don’t know how to change the width and remove the border. I have read your response, but don’t understand what to do. I was wondering if you could explain it to someone who has no clue about this type of thing.
Here is a screenshot
What I posted is custom CSS, which you can add by going to Admin > Customize, and then adding that to a theme or theme component by clicking “Edit CSS/HTML” and pasting into the Common > CSS section.
If you don’t already have a custom theme, I think you can either add the CSS directly to your default theme, or make a new theme component, add the CSS there, and then make sure that component is added to the main theme.
This may sound confusing if you’re not yet familiar with Discourse themes / customization at all. Give this a read for more detail and it should start to make sense how it all works! —
Hi Brendan,
That’s a lot of complicated reading.
Isn’t there a straight forward…go to YouTube, click on ‘x’ change ‘y’ and hey presto?
That guide is just background reading if you get lost, but you should basically be able to just copy-paste that code to your theme and have it work.
You may be able to pass the width/height params as part of the YouTube URL (as per this post), but this customization is currently needed to change the default way Discourse displays YouTube videos.
I do agree Discourse could handle this better by default though so this customization isn’t needed! @Johani would you consider making this the default for video embeds? Would make for more consistent design (e.g. I believe oneboxes, large images, etc. always display full-width…)
I am still unsure how to adjust the height and width of an individual post. I can see that it should be 690 & 400, but my link (for an unlisted YouTube video) doesn’t contain height or width like it does in the example you sent me.
Hmmm just tested and it looks like that method still works? You just append &width=690&height=400 to the first part of the URL e.g. https://www.youtube.com/watch?v=4CJvasYJP6o
But yeah you’d have to do this for every single video so the method above is definitely better to have consistent video display for the whole forum e.g. if any other users besides yourself may be posting video links.
这比您之前提到的方案更简单，但确实，为每个视频单独操作可能会是个问题。希望您能提供上述方案的更简便版本。
如果您希望所有视频都以此方式显示，我强烈建议不要为单个视频调整 URL，而是使用上述 CSS 修改。
如前所述，只需进入“管理” > “自定义” > “主题”，将该代码片段粘贴到您的 CSS 中（如果放在组件中会更模块化，但直接添加到主主题也没问题）。这只需要一分钟。我认为没有更简单的方法了。
这里真正的“更简单”解决方案是 Discourse 将其设为默认行为。大多数嵌入内容（大图片、Onebox、GitHub 代码嵌入）都以全宽显示，让视频嵌入也表现得类似，视觉效果会更好，且视觉一致性更强。
不过，Discourse 自 2015 年 就已讨论过此问题，但他们似乎无意做出这一改变。需要注意的是，也有人担心视频宽度与 YouTube 缩略图尺寸/所需带宽不匹配的问题，详见：https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6 —— 这似乎是主要障碍。不过正如我在那个话题中提到的，这种权衡实际上几乎察觉不到……
那是去年的情况，不确定 Discourse 团队对 YouTube 尺寸是否有新的看法。但无论如何，这个问题经常出现，而我也逐渐明白，在 Discourse 核心中将其设为默认值，确实比看起来要棘手得多 
不过，以上这些都略显理论化，简而言之，您只需花大约 30 秒将上述代码片段粘贴进去，即可在您的网站上获得令人惊叹的全宽 YouTube 视频！
这一变更与我们将 Discourse 主要视为讨论系统而非视频分发系统的理念不符。
然而……
我并不认为有人希望 Discourse 成为一个“视频分发系统”，但如果你要允许分享和讨论视频——这对许多论坛（包括我们自己的）都非常重要——那么它们应该看起来更美观。是的，我所说的“美观”是指“像其他 Discourse 嵌入内容一样，横跨整个帖子宽度以优化空间”。不过我想我们可以求同存异 
如果您更看重外观而非 LazyYT 的优势（由于不加载完整的 iframe，它可以阻止 Google 跟踪每个用户，并且页面也因此更轻量），您只需从插件文件夹中删除 lazyYT，它便会回退到标准的 oEmbed：
只需将 iframe 宽度设置为 690
我花了太多时间研究 YouTube API。为了让 LazyYT 使用更优质的缩略图（以适应我们 690 像素的帖子宽度），我们需要要求每位管理员注册 YouTube API 密钥，并实现回退到当前缩略图的逻辑（因为旧 YouTube 视频没有高清缩略图），但这实在不值得投入这么多精力。因此，如果您只是希望它看起来更酷，只需在您的 app.yml 的 run 钩子中运行简单的 rm -rf plugin/lazyYT 命令即可。
如果有人关心此问题并希望为 LazyYT 实现更完善的缩略图逻辑（涵盖所有情况），我们完全欢迎提交 Pull Request：
CSS 解决方案对我们来说完全可行——我们既能享受懒加载的好处，视频又能与其他媒体保持相同的宽度。双喜临门
确实如此。你有没有考虑过获取 maxresdefault.jpg？不过并非所有视频都有这个文件，因此插件需要一些额外的智能处理。
[quote=“bartv, 帖子:18, 主题:85385, full:true”]
你有没有考虑过获取 maxresdefault.jpg？不过并非所有视频都有这个文件，因此插件需要增加一些额外的智能逻辑。[/quote]
这正是我在此处描述的内容：
是的，我同意你的观点。我们需要一个更简单的解决方案。
