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 المذكور أعلاه بدلاً من ذلك.
وكما ذُكر أعلاه، انتقل ببساطة إلى Admin > Customize > Themes والصق هذا الجزء في ملف CSS الخاص بك (سيكون أكثر مرونة إذا كان ضمن مكون، لكنه يعمل بشكل جيد أيضًا عند إضافته إلى السمة الرئيسية). يجب أن يستغرق الأمر دقيقة واحدة فقط. ولا أعتقد أن هناك طريقة أبسط للقيام بذلك.
الحل “الأسهل” حقًا هنا سيكون أن تجعل منصة Discourse هذا السلوك افتراضيًا. فمعظم العناصر المدمجة (الصور الكبيرة، والصناديق الوصفية، ورموز GitHub المدمجة) تُعرض بعرض كامل، وجعل الفيديوهات المدمجة تتصرف بشكل مشابه سيبدو أفضل + سيكون أكثر اتساقًا بصريًا.
ومع ذلك، فقد تم مناقشة هذا الأمر منذ عام 2015، ولا يبدو أنهم راغبين في إجراء هذا التغيير. تجدر الإشارة أيضًا إلى وجود بعض المخاوف بشأن عدم التطابق بين عرض الفيديو وحجم صورة مصغرة من YouTube / عرض النطاق الترددي المطلوب، انظر: https://meta.discourse.org/t/making-embedded-linked-video-stretch-to-the-edges-of-the-topic/87960/6 — يبدو أن هذا قد يكون العائق الرئيسي هنا. وعلى الرغم من أنني ذكرت في ذلك الموضوع أن المفاضلة تبدو غير ملحوظة تقريبًا…
كان ذلك في العام الماضي، ولا أعرف ما إذا كان لدى فريق Discourse أي أفكار جديدة بشأن حجم يوتيوب. لكن نعم، هذا الأمر يظهر بشكل متكرر، وقد تعلمت أن جعل هذا السلوك افتراضيًا في نواة Discourse هو بالتأكيد مشكلة أكثر تعقيدًا مما يبدو 
كل هذا نوعًا ما أكاديمي، لكن القصة المختصرة هي أنه يمكنك لصق الجزء المذكور أعلاه في حوالي 30 ثانية فقط والحصول على فيديوهات يوتيوب رائعة بعرض كامل على موقعك!
هذا التغيير يتعارض مع رؤيتنا لمنصة Discourse كنظام للمناقشات في المقام الأول، وليس كنظام لتوزيع مقاطع الفيديو.
ومع ذلك…
لا أعتقد أن أي شخص يريد أن يكون Discourse “نظام توزيع فيديو”، ولكن إذا كنت ستسمح بمشاركة ومناقشة الفيديوهات — وهو أمر مهم جدًا للعديد من المنتديات، بما في ذلك منتدانا — فيجب أن تبدو جيدة. ونعم، بـ “جيدة” أقصد “تمتد عبر عرض المنشور بالكامل لتحسين المساحة تمامًا مثل تضمينات Discourse الأخرى”، لكنني أظن أننا يمكننا الاتفاق على الاختلاف 
إذا كنت تُقدّم المظهر على فوائد LazyYT (التي تمنع تتبع Google لكل مستخدم لأنها لا تحمّل الـ iFrame بالكامل، ولأن الصفحة أخفّ لنفس السبب)، فيمكنك ببساطة حذف مجلّد lazyYT من مجلّد الإضافات، وسيعود النظام تلقائيًا إلى استخدام تضمينات oembed القياسية:
لقد اضطررت فقط إلى ضبط عرض الـ iframe على 690 بكسل
قضيت وقتًا طويلاً جدًا في البحث عن واجهات برمجة تطبيقات YouTube، ومن أجل جعل LazyYT يستخدم صورًا مصغّرة أفضل (يمكن أن تتناسب مع عرض منشوراتنا البالغ 690 بكسل)، كان سيتعيّن علينا طلب تسجيل كل مدير للحصول على مفاتيح واجهة برمجة تطبيقات YouTube، وتنفيذ منطق للعودة إلى الصور المصغّرة الحالية لأن مقاطع الفيديو القديمة على YouTube لا تحتوي على صور مصغّرة عالية الدقة، ولم يكن الأمر يستحق الجهد المبذول. لذا، إذا كنت تريد فقط أن يبدو الأمر رائعًا، فقم بتشغيل الأمر البسيط rm -rf plugin/lazyYT في خطّية run في ملف app.yml الخاص بتطبيقك.
نرحّب تمامًا بالمساهمات (pr-welcome) إذا كان هناك شخص يهتم بهذا الموضوع ويرغب في تنفيذ منطق أفضل للصور المصغّرة في LazyYT يأخذ في الحسبان جميع الحالات التالية:
حل CSS يعمل بشكل جيد بالنسبة لنا - ما زلنا نستفيد من التحميل الكسول، كما أن مقاطع الفيديو لها نفس عرض الوسائط الأخرى. فوز مزدوج
صحيح تمامًا. هل فكرت في الحصول على ملف maxresdefault.jpg؟ رغم أن ليس كل الفيديوهات تحتوي على هذا الملف، لذا سيتطلب ذلك بعض الذكاء الإضافي في الإضافة.
هذا بالضبط ما وصفته هنا
نعم، أوافقك الرأي. نحتاج إلى نسخة أسهل من الحل المذكور.
