إذا كنت تمتلك مدونة بلوجر وتريد عرض مجموعة من فيديوهات اليوتيوب داخل صفحة واحدة بشكل احترافي ومنظم، فهذا الكود سيكون مناسبًا لك جدًا.
في هذا الشرح نقدم لك كود مشغل فيديوهات يوتيوب لمدونات بلوجر، يعمل بدون الحاجة إلى مفاتيح Google API، ويقوم بجلب صورة الفيديو وعنوانه تلقائيًا، مع قائمة تشغيل جانبية أو سفلية حسب حجم الشاشة.
الكود مناسب للدورات التعليمية، قوائم الشروحات، الفيديوهات التقنية، الدروس، القنوات التعليمية، أو أي صفحة تريد من خلالها عرض أكثر من فيديو بطريقة مرتبة وجذابة.
{getButton} $text={معاينة} $icon={preview} $color={#f57c00}
مميزات كود مشغل فيديوهات يوتيوب لبلوجر
يأتي هذا الكود بعدة مميزات مهمة تجعله مناسبًا للاستخدام داخل صفحات بلوجر، ومن أهمها:
- يعمل بدون مفاتيح Google API.
- جلب صورة الفيديو تلقائيًا من يوتيوب.
- جلب عنوان الفيديو تلقائيًا.
- تصميم احترافي قريب من شكل قوائم تشغيل يوتيوب.
- متجاوب مع الهاتف والتابلت والكمبيوتر.
- يدعم اللغة العربية واتجاه RTL.
- إمكانية إضافة فيديو جديد بسهولة جدًا.
- يدعم روابط YouTube العادية والمختصرة و Shorts.
- يحتوي على قائمة تشغيل قابلة للتمرير.
- يظهر الفيديو النشط بشكل واضح.
- مناسب لصفحات الدورات والشروحات.
فكرة عمل الكود
يعتمد الكود على إضافة روابط فيديوهات يوتيوب داخل عناصر بسيطة جدًا، وبعدها يقوم JavaScript تلقائيًا باستخراج معرف الفيديو من الرابط.
بعد استخراج معرف الفيديو، يقوم الكود بجلب صورة الفيديو من يوتيوب، ثم يحاول جلب عنوان الفيديو تلقائيًا بدون استخدام API Key.
بعد ذلك يتم بناء قائمة الفيديوهات بشكل تلقائي داخل الصفحة، وعند الضغط على أي فيديو يتم تشغيله مباشرة داخل المشغل الرئيسي.
طريقة تركيب الكود في بلوجر
لإضافة الكود إلى مدونة بلوجر، اتبع الخطوات التالية:
- ادخل إلى لوحة تحكم بلوجر.
- اختر الصفحات أو المشاركات.
- أنشئ صفحة جديدة أو افتح الصفحة التي تريد إضافة المشغل إليها.
- غيّر وضع المحرر إلى HTML View.
- انسخ الكود كاملًا وضعه داخل الصفحة.
- احفظ الصفحة ثم اعرضها.
يفضل وضع الكود داخل صفحة مستقلة إذا كنت تريد إنشاء صفحة خاصة للدورة أو قائمة الفيديوهات.
طريقة إضافة فيديو جديد
إضافة فيديو جديد سهلة جدًا، ولا تحتاج إلى تعديل JavaScript أو CSS.
كل ما عليك فعله هو نسخ هذا السطر:
<div class="ak-video-item" data-url="https://www.youtube.com/watch?v=VIDEO_ID"></div>ثم استبدل رابط الفيديو برابط الفيديو الجديد من يوتيوب.
مثال:
<div class="ak-video-item" data-url="https://www.youtube.com/watch?v=jLAlysywB_s"></div>ولإضافة أكثر من فيديو، كرر السطر بهذا الشكل:
<div class="ak-yt-list">
<div class="ak-video-item" data-url="https://www.youtube.com/watch?v=jLAlysywB_s"></div>
<div class="ak-video-item" data-url="https://www.youtube.com/watch?v=M466oDOtbTw"></div>
<div class="ak-video-item" data-url="https://www.youtube.com/watch?v=uBawcJHmyXk"></div>
</div>هذا هو المكان المخصص لإضافة الفيديوهات.
فقط انسخ أي سطر من أسطر الفيديو، وضعه أسفل القائمة، ثم غيّر الرابط.
الصيغ المدعومة من روابط يوتيوب
الكود يدعم أكثر من نوع من روابط يوتيوب، مثل:
رابط يوتيوب العادي
<div class="ak-video-item" data-url="https://www.youtube.com/watch?v=VIDEO_ID"></div>رابط يوتيوب المختصر
<div class="ak-video-item" data-url="https://youtu.be/VIDEO_ID"></div>رابط YouTube Shorts
<div class="ak-video-item" data-url="https://www.youtube.com/shorts/VIDEO_ID"></div>رابط Embed
<div class="ak-video-item" data-url="https://www.youtube.com/embed/VIDEO_ID"></div>هل يحتاج الكود إلى API Key؟
لا، الكود لا يحتاج إلى مفاتيح Google API.
هذه من أهم مميزات الكود، لأنه يعمل مباشرة داخل بلوجر بدون إعدادات معقدة أو إنشاء مشروع داخل Google Cloud.
لكن يجب الانتباه إلى أن جلب عنوان الفيديو يتم من خلال خدمة خارجية، لذلك في حال تعطلت الخدمة مؤقتًا قد يظهر عنوان افتراضي للفيديو، بينما سيبقى تشغيل الفيديو والصورة يعملان بشكل طبيعي.
ملاحظات مهمة قبل الاستخدام
- تأكد أن رابط الفيديو صحيح.
- لا تضع رابط قناة، يجب وضع رابط فيديو فقط.
- إذا ظهر لك “رابط يوتيوب غير صالح”، فهذا يعني أن الرابط غير صحيح أو ليس رابط فيديو مباشر.
- يفضل استخدام روابط الفيديو العادية من يوتيوب.
- الكود مناسب للصفحات أكثر من المقالات الطويلة.
- لا تضع أكثر من نسخة من نفس الكود داخل نفس الصفحة إلا بعد تعديل أسماء الـ IDs.