هل تريد إضافة فيديوهات YouTube Shorts داخل مقالات Blogger بطريقة أنيقة ومتجاوبة، دون وضع عدة مشغلات فيديو كاملة داخل الصفحة منذ البداية؟ في هذا الدليل سنستخدم كودًا خفيفًا يعرض صورًا مصغرة للفيديوهات، ثم ينشئ مشغل YouTube فقط عند اختيار الفيديو.
الفكرة التي سنطبقها هنا تعتمد على سكربت Dora Tech Shorts Embed - Light Optimized v2، وهو إصدار مطوّر من الفكرة الأصلية، صُمم لعرض عدة فيديوهات Shorts في شكل بطاقات، مع فتح الفيديو داخل نافذة منبثقة عند النقر عليه.
إذا كنت تريد الكود الأصلي نفسه المشروح في الفيديو دون التعديلات والتحسينات الموجودة في هذه النسخة، يمكنك الرجوع إلى المقالة الأصلية على موقع الصباغ للمعلوميات:
مشاهدة المقالة الأصلية والحصول على الكود الأصلي
ما الفرق بين الكود الأصلي ونسخة Light Optimized v2؟
قبل استخدام الكود، من المهم توضيح نقطة أساسية: الكود الموجود في هذا المقال ليس نسخة مطابقة للكود الأصلي المذكور في الفيديو، وإنما هو نسخة مطوّرة ومحسّنة قمنا بتعديلها وإضافة عدد من التحسينات المتعلقة بالأداء، وإدارة الفيديوهات، وإمكانية الوصول، وتجربة الاستخدام.
| الميزة | الكود الأصلي | Light Optimized v2 |
|---|---|---|
| تحميل الصور المصغرة |
loading="lazy" فقط
|
loading="lazy" + decoding="async"
|
| التحكم بلوحة المفاتيح | غير موجود | Enter و Space و Escape |
| إمكانية الوصول | محدودة | محسّنة باستخدام ARIA وإدارة التركيز |
| رابط YouTube |
youtube.com
|
youtube-nocookie.com
|
| معاملات المشغل |
autoplay + playsinline
|
autoplay + playsinline + rel=0
|
| إدارة الفيديوهات | تعديل عناصر الفيديو داخل الكود |
قائمة VIDEOS مستقلة
|
| التحقق من معرف الفيديو | غير موجود |
تحقق باستخدام idPattern
|
| النص البديل ALT | ALT بسيط | ALT قابل للتخصيص لكل فيديو |
| إرجاع التركيز بعد الإغلاق | غير موجود | إرجاع التركيز إلى البطاقة السابقة |
| حذف iframe بعد الإغلاق | موجود | موجود |
| التعامل مع فيديو واحد | عرض عادي | توسيط تلقائي للبطاقة الواحدة |
ملاحظة حول SEO:
وجود ALT أفضل ووصف واضح للصور يساعد على فهم الصور وإتاحتها للمستخدمين، لكنه
لا يعني أن هذا السكربت سيمنح الصفحة ترتيبًا أعلى تلقائيًا. Google توصي أصلًا
باستخدام نص بديل وصفي للصور، كما أوضحت في تحديثات 2026 أن البيانات المنظمة
ووسوم الصور مثل og:image يمكن أن تدخل ضمن مصادر تحديد الصور
المستخدمة في Search وDiscover.
أما النسخة المطوّرة نفسها فلا ينبغي اعتبارها "خدعة SEO". الهدف الأساسي منها هو تحسين طريقة عرض الفيديو وإدارة الموارد وتجربة المستخدم.
ويمكنك أيضًا إثراء مقالات Blogger بعناصر تفاعلية أخرى، مثل إضافة خرائط Google داخل المقالات بطريقة بسيطة ومناسبة لتجربة المستخدم.
- فيديو يشرح الطريقة
- شاهد المثال داخل المقال
- كيف يعمل السكربت؟
- كيف يحافظ السكربت على خفة الصفحة؟
- الكود المستخدم: Light Optimized v2
- طريقة تركيب الكود في Blogger
- كيفية الحصول على معرف Shorts
- كيفية إضافة أو حذف الفيديوهات
- هل تضمين Shorts يحسن SEO؟
- هل يمكن أن تزيد الأرباح؟
- ماذا عن حقوق الطبع والنشر؟
- الأسئلة الشائعة
- الخلاصة
فيديو يشرح الطريقة
قبل تجربة الكود، يمكنك مشاهدة الشرح الذي يوضح الفكرة وطريقة استخدامها داخل المقالات. أما الأمثلة الموجودة أسفل هذا الفيديو فهي لتوضيح شكل النتيجة بعد تطبيق الكود.
استخدام نطاق youtube-nocookie.com هنا يعتمد على
Privacy-Enhanced Mode الخاص بتضمين فيديوهات YouTube.
شاهد المثال داخل المقال
الآن نصل إلى الجزء العملي. في الأسفل ستجد أربعة فيديوهات Shorts مضمّنة باستخدام نفس النسخة المطوّرة من السكربت التي سنشرحها في المقال.
هذه الفيديوهات الأربعة ليست بالضرورة مرتبطة بموضوع المقال؛ وجودها هنا فقط لعرض شكل وطريقة عمل مكوّن Shorts بعد تركيبه داخل صفحة Blogger.
هذه الفيديوهات الأربعة مجرد أمثلة. يمكنك استبدالها بأي فيديوهات YouTube Shorts أخرى.
كيف يعمل السكربت؟
يعتمد السكربت على فكرة بسيطة: بدلًا من وضع أربعة مشغلات YouTube كاملة داخل الصفحة منذ تحميلها، يتم عرض بطاقات تحتوي على الصور المصغرة للفيديوهات فقط.
عندما ينقر الزائر على إحدى البطاقات، يقوم JavaScript بإنشاء عنصر
iframe الخاص بالفيديو وفتحه داخل نافذة منبثقة.
وعند إغلاق النافذة، يتم حذف الـ iframe من الصفحة مرة أخرى. وهذا
يجعل الكود مناسبًا خصوصًا عندما تريد عرض عدة Shorts داخل المقال دون إنشاء
عدة مشغلات فيديو كاملة منذ البداية.
ماذا سيرى الزائر؟
- صورًا مصغرة للفيديوهات.
- زر تشغيل واضح فوق كل صورة.
- عند النقر، يظهر الفيديو داخل نافذة منبثقة.
- يبدأ الفيديو تلقائيًا بعد فتح المشغل، مع احتمال منع التشغيل التلقائي حسب سياسة المتصفح.
- يمكن إغلاق المشغل بزر الإغلاق أو بالنقر خارج الفيديو.
- يمكن أيضًا الضغط على زر Escape لإغلاق النافذة.
كيف يحافظ السكربت على خفة الصفحة؟
من أهم الأفكار في هذا التصميم أن الصفحة لا تبدأ بأربعة عناصر
iframe خاصة بـ YouTube. في البداية يتم إنشاء البطاقات والصور
المصغرة فقط، بينما يتم إنشاء مشغل YouTube عند اختيار الفيديو.
لذلك لا ينبغي وصف الطريقة بأنها تجعل تضمين YouTube بلا أي تكلفة على الأداء، لكنها تقلل الموارد التي يحتاجها المشغل قبل أن يطلب الزائر مشاهدة الفيديو.
كما أن الصور المصغرة تستخدم loading="lazy" و
decoding="async"، بينما يتم تحميل الـ iframe بعد التفاعل مع
البطاقة.
وبعد إغلاق الفيديو، يقوم السكربت باستخدام
player.innerHTML = ''
لإزالة المشغل من الصفحة وإيقاف تشغيل الفيديو.
وهذا يتوافق مع فكرة استخدام صورة معاينة ثم تحميل تجربة الفيديو عند تفاعل المستخدم، وهي ممارسة تستخدمها وثائق Google أيضًا عندما يكون من المفيد تأخير تجربة الفيديو الكاملة إلى لحظة التفاعل.
الكود المستخدم: Light Optimized v2
هذا هو الكود الكامل المستخدم في المثال السابق. إذا أردت استخدامه في مقال آخر، يمكنك نسخه كما هو ثم تعديل قائمة الفيديوهات فقط.
نسخة الكود الأصلية: مقال تضمين YouTube Shorts الأصلي
<pre><code>، يجب تحويل علامات HTML إلى كيانات HTML
حتى يظهر الكود كنص ولا يتم تنفيذه مباشرة.
<!-- Dora Tech Shorts Embed - Light Optimized v2 -->
<style>
.yt-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:20px auto;max-width:850px}
.yt-grid-4:has(.yt-s-card:only-child){grid-template-columns:minmax(170px,210px);justify-content:center}
.yt-s-card{position:relative;background:#111;border-radius:12px;overflow:hidden;padding-bottom:177.78%;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.yt-s-card:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.yt-s-card:focus-visible{outline:2px solid #ff0000;outline-offset:3px}
.yt-s-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;background:#1a1a1a}
.yt-s-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;background:#ff0000;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,0,0,.4);transition:transform .2s,background .2s;pointer-events:none}
.yt-s-card:hover .yt-s-btn{transform:translate(-50%,-50%) scale(1.1);background:#cc0000}
.yt-s-btn::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.yt-modal{display:none;position:fixed;inset:0;padding:20px;box-sizing:border-box;background:rgba(0,0,0,.85);z-index:99999;align-items:center;justify-content:center}
.yt-modal.active{display:flex}
.yt-modal-box{position:relative;width:88%;max-width:360px;height:78vh;max-height:760px;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.yt-modal-box iframe{width:100%;height:100%;display:block;border:0}
.yt-close-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border:0;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;line-height:1;cursor:pointer;z-index:10;transition:background .2s,transform .2s}
.yt-close-btn:hover{background:rgba(255,0,0,.85);transform:scale(1.05)}
.yt-close-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:600px){.yt-grid-4{grid-template-columns:repeat(2,1fr);gap:8px;max-width:100%}.yt-grid-4:has(.yt-s-card:only-child){grid-template-columns:minmax(150px,190px);justify-content:center}.yt-modal{padding:12px}.yt-modal-box{width:92%;height:82vh;max-width:360px}}
</style>
<div class="yt-grid-4" id="ytShortsGrid"></div>
<div id="ytModal" class="yt-modal" role="dialog" aria-modal="true" aria-label="مشغل الفيديو" aria-hidden="true">
<div class="yt-modal-box">
<button type="button" class="yt-close-btn" aria-label="إغلاق الفيديو">×</button>
<div id="ytPlayerContainer" style="width:100%;height:100%;"></div>
</div>
</div>
<script>
(function(){
'use strict';
/* عدّل هذه القائمة فقط لإضافة أو حذف فيديوهات */
var VIDEOS = [
{ id: "S6bdDfB0TX0", alt: "معاينة فيديو YouTube Shorts تجريبي 1" },
{ id: "HC0Q_qQaT3A", alt: "معاينة فيديو YouTube Shorts تجريبي 2" },
{ id: "BtwlKme9LeA", alt: "معاينة فيديو YouTube Shorts تجريبي 3" },
{ id: "ybbiRL8R1XA", alt: "معاينة فيديو YouTube Shorts تجريبي 4" }
];
var idPattern = /^[a-zA-Z0-9_-]{6,15}$/;
var grid = document.getElementById('ytShortsGrid');
var modal = document.getElementById('ytModal');
var player = document.getElementById('ytPlayerContainer');
var closeBtn = document.querySelector('.yt-close-btn');
if (!grid || !modal || !player) return;
var html = '';
VIDEOS.forEach(function(v){
if (!idPattern.test(v.id)) return;
html +=
'<div class="yt-s-card" data-id="' + v.id + '" role="button" tabindex="0" aria-label="تشغيل: ' + v.alt + '">' +
'<img src="https://i.ytimg.com/vi/' + v.id + '/hq720.jpg" alt="' + v.alt + '" loading="lazy" decoding="async">' +
'<div class="yt-s-btn"></div>' +
'</div>';
});
grid.innerHTML = html;
var cards = grid.querySelectorAll('.yt-s-card');
var activeCard = null;
var previousOverflow = '';
cards.forEach(function(card){
var id = card.getAttribute('data-id');
var img = card.querySelector('img');
img.onerror = function(){
if (!this.dataset.fb) {
this.dataset.fb = '1';
this.src = 'https://i.ytimg.com/vi/' + id + '/hqdefault.jpg';
return;
}
if (this.dataset.fb === '1') {
this.dataset.fb = '2';
this.src = 'https://i.ytimg.com/vi/' + id + '/0.jpg';
return;
}
this.onerror = null;
};
});
function openYtModal(card){
var id = card.getAttribute('data-id');
if (!id) return;
activeCard = card;
player.innerHTML =
'<iframe src="https://www.youtube-nocookie.com/embed/' +
encodeURIComponent(id) +
'?autoplay=1&playsinline=1&rel=0" title="YouTube video player" loading="eager" ' +
'allow="autoplay; encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>';
previousOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
modal.classList.add('active');
modal.setAttribute('aria-hidden', 'false');
if (closeBtn) closeBtn.focus();
}
function closeYtModal(){
modal.classList.remove('active');
modal.setAttribute('aria-hidden', 'true');
player.innerHTML = '';
document.body.style.overflow = previousOverflow;
if (activeCard) {
activeCard.focus();
activeCard = null;
}
}
cards.forEach(function(card){
card.addEventListener('click', function(){
openYtModal(card);
});
card.addEventListener('keydown', function(e){
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openYtModal(card);
}
});
});
if (closeBtn) closeBtn.addEventListener('click', closeYtModal);
modal.addEventListener('click', function(e){
if (e.target === modal) closeYtModal();
});
document.addEventListener('keydown', function(e){
if (e.key === 'Escape' && modal.classList.contains('active')) {
closeYtModal();
}
});
})();
</script>طريقة تركيب الكود في Blogger
تركيب السكربت لا يحتاج إلى تعديل القالب بالكامل. يمكنك وضعه داخل المقال نفسه باستخدام محرر HTML في Blogger.
- افتح المقال في Blogger.
- انتقل إلى وضع HTML.
- ضع الكود في المكان الذي تريد ظهور الفيديوهات فيه.
- احفظ المقال ثم عاين الصفحة.
- اضغط على إحدى بطاقات Shorts للتأكد من عمل المشغل.
VIDEOS فقط.
كيفية الحصول على معرف YouTube Shorts
لا تحتاج إلى وضع رابط Shorts الكامل داخل الكود. المطلوب هو استخراج معرف الفيديو ID.
مثلًا إذا كان الرابط:
https://youtube.com/shorts/S6bdDfB0TX0فإن معرف الفيديو هو:
S6bdDfB0TX0ثم تضعه داخل القائمة بهذا الشكل:
{ id: "S6bdDfB0TX0", alt: "معاينة فيديو YouTube Shorts تجريبي" }كيفية إضافة أو حذف الفيديوهات
أهم جزء في الكود بالنسبة للمستخدم هو هذا الجزء:
var VIDEOS = [
{ id: "S6bdDfB0TX0", alt: "معاينة فيديو YouTube Shorts تجريبي 1" },
{ id: "HC0Q_qQaT3A", alt: "معاينة فيديو YouTube Shorts تجريبي 2" },
{ id: "BtwlKme9LeA", alt: "معاينة فيديو YouTube Shorts تجريبي 3" },
{ id: "ybbiRL8R1XA", alt: "معاينة فيديو YouTube Shorts تجريبي 4" }
];لإضافة فيديو جديد، أضف سطرًا جديدًا:
{ id: "VIDEO_ID", alt: "وصف مختصر للصورة المصغرة" }ولحذف فيديو، احذف السطر الخاص به من المصفوفة.
أما قيمة alt فهي النص البديل للصورة المصغرة، لذلك من الأفضل أن
تكون وصفية ومفيدة للمستخدم بدل حشو الكلمات المفتاحية فيها. Google توصي بأن
يكون النص البديل مفيدًا ووصفياً للصور.
هل تضمين Shorts يحسن SEO؟
هنا من المهم التفريق بين تحسين تجربة المستخدم وبين الحصول على ترتيب أعلى في Google.
إضافة فيديو داخل المقال قد تجعل الصفحة أكثر فائدة لبعض الزوار، خصوصًا عندما يكون الفيديو مكملًا للمحتوى المكتوب، لكن لا يوجد ما يبرر القول إن مجرد إضافة Shorts ستؤدي تلقائيًا إلى رفع ترتيب المقال.
كما أن وجود JavaScript في الصفحة لا يعني بحد ذاته أن Google لن تستطيع فهم المحتوى؛ Google أوضحت في تحديثاتها الحديثة أنها تقوم برندر صفحات JavaScript منذ سنوات. لكن ذلك لا يعني أن كل محتوى فيديو يتم تحميله بعد التفاعل سيحصل تلقائيًا على فرص ظهور كفيديو في نتائج البحث.
لذلك فإن هذا السكربت مناسب أساسًا عندما يكون هدفك عرض الفيديوهات داخل المقال بطريقة خفيفة وتفاعلية، وليس باعتباره حيلة مضمونة لتحسين الترتيب.
وإذا كان هدفك تحديدًا الحصول على ظهور للفيديو في ميزات بحث Google، فهناك متطلبات وإشارات إضافية خاصة بفهرسة الفيديو، ولذلك يجب التعامل مع Video SEO كموضوع مستقل وليس مجرد إضافة iframe أو نافذة منبثقة.
هل يمكن أن تزيد الأرباح؟
لا يمكن اعتبار تضمين Shorts وسيلة مضمونة لزيادة أرباح AdSense.
الفائدة التجارية المحتملة تأتي بصورة غير مباشرة: إذا كان الفيديو مفيدًا للزائر وجعله يتفاعل أكثر مع الصفحة، فقد تتحسن تجربة الاستخدام وفرصة استمرار الزائر في تصفح الموقع. لكن الأرباح الفعلية تعتمد على عدد الزيارات، ومصادر الزيارات، والإعلانات المعروضة، وموقعها، وسلوك الزوار، وعدة عوامل أخرى.
لذلك الأفضل أن يكون الفيديو جزءًا طبيعيًا من المقال وليس وسيلة لإجبار الزائر على البقاء في الصفحة.
ماذا عن حقوق الطبع والنشر؟
تضمين فيديو YouTube باستخدام المشغل الرسمي يختلف عن تنزيل الفيديو وإعادة رفعه إلى موقعك.
خاصية Embed تسمح لأصحاب المواقع بإضافة مشغل YouTube إلى صفحاتهم، لكن صاحب الفيديو يستطيع تعطيل التضمين. لذلك لا ينبغي التعامل مع التضمين باعتباره نقلًا لحقوق ملكية الفيديو.
مع ذلك، التضمين لا يعني أنك أصبحت مالكًا للفيديو أو أن بإمكانك إعادة نشره كعمل خاص بك. لذلك من الأفضل استخدام التضمين الرسمي وعدم تنزيل الفيديو وإعادة رفعه أو تقديمه على أنه من إنتاجك.
الأسئلة الشائعة
هل يؤثر السكربت على سرعة Blogger؟
التصميم يقلل تحميل مشغلات YouTube قبل تفاعل الزائر معها، لأن الـ iframe لا يتم إنشاؤه إلا بعد اختيار الفيديو. لكن لا يمكن القول إن تأثير YouTube على الأداء يصبح صفرًا بعد النقر.
هل هذه النسخة هي نفسها الموجودة في الفيديو؟
لا. الفيديو يشرح الفكرة والكود الأصلي، بينما الكود الموجود في هذه المقالة هو نسخة مطوّرة ومحسّنة من الفكرة الأصلية.
أين أجد الكود الأصلي الموجود في الفيديو؟
يمكنك الرجوع إلى المقالة الأصلية على موقع الصباغ للمعلوميات للحصول على الكود الأصلي كما تم تقديمه في الشرح.
هل يمكن استخدام فيديو واحد فقط؟
نعم. يمكنك حذف بقية العناصر من مصفوفة VIDEOS وترك فيديو واحد.
الكود يحتوي أيضًا على تنسيق خاص لتوسيط البطاقة عندما تكون هناك بطاقة واحدة.
هل يمكن استخدام أكثر من أربعة فيديوهات؟
نعم. المصفوفة ليست مقيدة بأربعة فيديوهات. يمكنك إضافة المزيد، وسيقوم التصميم بتوزيع البطاقات تلقائيًا حسب مساحة الشاشة.
هل يعمل على الهاتف؟
نعم. يوجد Media Query مخصص للشاشات الصغيرة، حيث تتحول البطاقات إلى عمودين بدلًا من توزيعها في صف واحد.
ماذا يحدث عند إغلاق الفيديو؟
يتم حذف الـ iframe من الحاوية، وبذلك يتوقف تشغيل الفيديو ويتم تحرير المشغل الذي تم إنشاؤه عند فتحه.
هل أحتاج إلى وضع رابط Shorts كامل داخل الكود؟
لا. المطلوب فقط هو معرف الفيديو الموجود في رابط Shorts.
هل يمكنني تغيير الفيديوهات لاحقًا؟
نعم. كل ما عليك فعله هو تعديل مصفوفة VIDEOS وإضافة معرفات
الفيديوهات التي تريدها.
هل ALT الخاص بالصور مهم؟
نعم، من الأفضل أن يكون لكل صورة نص بديل وصفي ومفيد. لكن لا تستخدم ALT كوسيلة لحشو الكلمات المفتاحية؛ الهدف الأساسي هو وصف الصورة ومساعدة محركات البحث والمستخدمين الذين يعتمدون على تقنيات المساعدة على فهم محتواها.
الخلاصة
إذا كنت تريد إضافة فيديوهات YouTube Shorts داخل مقالات Blogger، فإن Light Optimized v2 يوفر طريقة بسيطة لعرض عدة فيديوهات في شكل بطاقات أنيقة ومتجاوبة.
الميزة الأساسية في هذا الأسلوب هي أن مشغل YouTube لا يتم إنشاؤه لكل فيديو منذ بداية تحميل الصفحة، وإنما يتم إنشاؤه عند اختيار الزائر للفيديو.
كما أن جميع الفيديوهات يمكن التحكم بها من قائمة واحدة داخل JavaScript، ولذلك يصبح تغييرها أو إضافة فيديوهات جديدة أمرًا سهلًا.
والنسخة الموجودة في هذه المقالة ليست نسخة مطابقة للكود الذي يظهر في الفيديو، وإنما نسخة مطوّرة ومحسّنة من الفكرة الأصلية.
والأهم أن استخدام هذه الطريقة يجب أن يكون لخدمة محتوى المقال وتجربة الزائر، وليس باعتبارها ضمانًا لتحسين ترتيب Google أو زيادة أرباح AdSense.
VIDEOS، وعدّل النصوص
الموجودة في alt بما يصف الصور بشكل مناسب، واترك بقية الكود كما
هو.