تضمين YouTube وVimeo مع محرر VeloCMS

لتضمين فيديو YouTube أو Vimeo في محرر VeloCMS، ما عليك سوى خطوتين: اكتب أمر الشرطة المائلة (/youtube أو /vimeo)، الصق الرابط، ثم اضغط Enter. يُحوِّل المحرر الرابط تلقائيًا إلى تضمين متجاوب ذي تحميل كسول. لا حاجة لكتابة iframes يدويًا ولا لتعيين خصائص العرض والارتفاع — إذ تتولى السمة النشطة ضبط نسبة العرض للارتفاع عبر تقنية CSS padding-top التي تجعل كل تضمين يملأ الحاوية تلقائيًا.

تضمين فيديو YouTube

في سطر جديد، اكتب /youtube. تنفتح لوحة الشرطة المائلة وتُحدِّد كتلة YouTube مسبقًا. اضغط Enter أو انقر عليها. يظهر حقل إدخال URL — الصق رابط YouTube بأي صيغة (رابط المشاهدة الكامل، رابط youtu.be المختصر، أو رابط التضمين). اضغط Enter فيُعرَض الفيديو كصورة مصغرة في المحرر. وعلى الصفحة المنشورة، يُحمَّل الفيديو بصورة كسولة — إذ لا تُهيَّأ iframe إلا حين يقترب القارئ منها بمسافة 200px، مما يمنع تضمين YouTube من إعاقة درجة LCP للصفحة.

إذا أردت أن يُشغَّل الفيديو تلقائيًا عند دخوله نطاق الرؤية (مكتوم الصوت كما تشترط المتصفحات)، أضف ?autoplay=1&mute=1 إلى رابط YouTube قبل لصقه. تحتفظ كتلة التضمين بمعاملات الاستعلام.

تضمين فيديو Vimeo

يعمل أمر /vimeo بالطريقة ذاتها. تُدعم روابط Vimeo بجميع صيغها — vimeo.com/123456789، وplayer.vimeo.com/video/123456789، والرابط الخاص بمربع حوار Share في Vimeo. يمكن لأصحاب حسابات Vimeo Pro تمرير معاملات إضافية مثل color وtitle=0&byline=0&portrait=0 لحذف علامة Vimeo التجارية — فقط الصقها مباشرةً في حقل URL.

انعكاسات الأداء

يُحمِّل iframe ليوتيوب وVimeo كميةً كبيرة من JavaScript لجهات خارجية — منظومة موافقة Google، وحزمة مشغل Vimeo، ونصوص التحليلات. يُحمِّل VeloCMS هذه العناصر بصورة كسولة عبر IntersectionObserver حتى لا تؤثر في LCP وTBT للقراء الذين لا يصلون إلى الفيديو بالتمرير. أما حين يكون الفيديو فوق الطيّ، فننصح بوضع صورة مصغرة ثابتة مع زر تشغيل يُهيِّئ iframe فقط عند النقر — وهذا نمط lite-youtube-embed الذي يحقق نتائج أفضل على Lighthouse حتى مقارنةً بـ iframe الأصلي ذي التحميل الكسول.