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 сделал это настройкой по умолчанию. Большинство вставок (большие изображения, oneboxes, вставки кода GitHub) отображаются на всю ширину, и если бы вставки видео вели себя аналогично, это выглядело бы лучше и обеспечило бы гораздо большую визуальную согласованность.
Однако это обсуждалось ещё с 2015 года (Make lazyYT plugin responsive easily), и они, похоже, не склонны к таким изменениям. Также есть некоторые опасения по поводу несоответствия между шириной видео и размером миниатюры 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 (блокировка отслеживания пользователей Google, так как не загружается полный iframe, и меньшая нагрузка на страницу по той же причине), вы можете просто удалить LazyYT из папки плагина — в этом случае система автоматически переключится на стандартные oEmbed:
Я потратил слишком много времени на изучение YouTube API. Чтобы заставить LazyYT использовать более качественные миниатюры (которые могли бы соответствовать нашей ширине поста в 690 пикселей), нам пришлось бы попросить каждого администратора зарегистрировать ключи YouTube API, реализовать логику возврата к текущим миниатюрам, поскольку старые видео YouTube не имеют HD-версий, и это не стоило затраченных усилий. Поэтому, если вам просто нужно, чтобы это выглядело красиво, просто выполните команду rm -rf plugin/lazyYT в хуке run вашего файла app.yml.
Мы полностью приветствуем pull-запросы (pr-welcome) от тех, кто заинтересован в этом и хочет реализовать более совершенную логику выбора миниатюр для LazyYT, учитывающую все возможные случаи:
CSS-решение отлично работает у нас — мы по-прежнему получаем выгоду от ленивой загрузки, И при этом видео имеют ту же ширину, что и другие медиа. Двойная победа
Действительно. Вы рассматривали возможность получения maxresdefault.jpg? Хотя не у всех видео он есть, поэтому для плагина потребуется добавить некоторую дополнительную логику.
Это именно то, что я описал здесь:
Да, я с вами согласен. Нам нужна более простая версия упомянутого решения.
