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 に貼り付けてください（コンポーネント内に入れるとよりモジュール化されますが、メインテーマに追加しても問題ありません）。1 分もかかりません。これより簡単な方法はないと思います。
本当の「より簡単な」解決策は、Discourse がこれをデフォルトにすることです。ほとんどの埋め込み（大きな画像、ワンボックス、GitHub コード埋め込み）は全幅で表示されます。動画埋め込みも同様に動作するようにすれば、見た目が良くなり、視覚的な一貫性も大幅に向上します。
しかし、これは 2015 年から議論されてきました が、Discourse チームはその変更を好んでいないようです。また、動画の幅と YouTube のサムネイルサイズ/必要な帯域幅の不一致に関する懸念もあります（https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6 を参照）。これが主な障壁のようです。ただし、そのトピックで述べたように、トレードオフはほとんど目立たないと思われます…
これは昨年のもので、Discourse チームが YouTube のサイズについて新しい考えを持っているかどうかはわかりません。しかし、この問題は頻繁に発生し、Discore コアでこれをデフォルトにすることは、一見思われるよりもかなり複雑な問題だと学びました 
いずれにせよ、それは学問的な話です。結論を言えば、上記のスニペットを文字通り 30 秒で貼り付けるだけで、あなたのサイトで見事な全幅の YouTube 動画が表示されるようになります！
この変更は、Discourse を主にディスカッションシステムであり、動画配信システムではないという私たちの見方と相容れません。
しかし…
Discourse を「動画配信システム」にしたいと思う人は誰もいないと思いますが、動画を共有し議論できるようにする以上（これは多くのフォーラム、私たちのものも含めて非常に重要です）、見た目を良くすべきです。そして、ここで言う「良い」とは「他の Discourse 埋め込みと同様にスペースを最適化するために投稿の全幅に広がること」を意味しますが、意見が一致しないことに同意しましょう😉
見た目を優先し、LazyYT の利点（Google の追跡をブロックする、全 iFrame を読み込まないため、ページが軽量になるなど）を無視する場合は、プラグインフォルダから lazyYT を削除するだけで、標準の oEmbed にフォールバックします。
YouTube API の調査にあまりにも多くの時間を費やしましたが、LazyYT でより良いサムネイル（当サイトの 690px の投稿幅に適合するもの）を使用させるには、すべての管理者に YouTube API キーの登録を求め、古い YouTube 動画には HD サムネイルが存在しないため現在のサムネイルにフォールバックするロジックを実装する必要があり、その労力に見合うものではありませんでした。したがって、単に見た目を良くしたいだけの場合は、アプリ.yml の run フックで単純に rm -rf plugin/lazyYT を実行してください。
以下のすべてのケースに対応する、より優れたサムネイルロジックを LazyYT に実装したいという方がいれば、pr-welcome です：
CSSのソリューションは私たちの環境で問題なく機能しています。遅延読み込みの恩恵を受けつつ、動画も他のメディアと同じ幅で表示されます。一石二鳥です
その通りですね。maxresdefault.jpg を取得することを検討されましたか？すべての動画にこの画像があるわけではないので、プラグイン側で追加の知能（ロジック）が必要になるでしょう。
これはまさに私がここで説明した通りです。
はい、おっしゃる通りです。ご紹介いただいた解決策の、より簡単なバージョンが必要ですね。
