التضمين المتجاوب

التضمين المتجاوب هو مقتطف [كود تضمين](/glossary/embed-code) يقوم تلقائياً بقياس المحتوى المضمَّن ليتطابق مع عرض وارتفاع الحاوية الأصل أو شاشة المشاهد. وعلى عكس [iframes](/glossary/iframe) ذات الأبعاد الثابتة التي تُنتج أشرطة تمرير أفقية أو تترك مساحات بيضاء فارغة، يعتمد التضمين المتجاوب على أعراض مئوية وتقنيات CSS الخاصة بنسبة العرض إلى الارتفاع لملء المساحة المتاحة بسلاسة. ويحافظ المحتوى على تناسبه سواء أكان عرض الحاوية ١٤٤٠ بكسل على شاشة سطح المكتب أم ٣٧٥ بكسل على هاتف ذكي. وتضمن هذه المقاربة أن تظهر الكتب التفاعلية والمستندات ومقاطع الفيديو والمحتوى التفاعلي المضمَّن بشكل صحيح على جميع الأجهزة دون الحاجة إلى تغيير الحجم يدوياً أو كتابة كود مخصّص لكل جهاز.

يصل القرّاء إلى المحتوى من مجموعة واسعة من الأجهزة وأحجام الشاشات. وإذا تجاوز كتاب تفاعلي مضمَّن حدود شاشة الجوال، يضطر القرّاء إلى التمرير الأفقي — وهي إشارة قوية إلى أن الصفحة غير محسَّنة. وإذا ظهر التضمين بحجم صغير جداً على شاشة عريضة، يصبح المحتوى صعب القراءة. كلا الحالتين تزيد من معدلات الارتداد وتُضعف مصداقية الصفحة المُستضيفة. ويقضي التضمين المتجاوب على هذه المشكلات، ويُبقي منشوراتك احترافية وسهلة الوصول في كل مكان. كما يحمي [Core Web Vitals](/glossary/core-web-vitals) لموقعك من خلال حجز المساحة التخطيطية الصحيحة قبل تحميل المحتوى، مما يمنع [Cumulative Layout Shift](/glossary/cls).

يُولّد FlipLink أكواد تضمين متجاوبة جاهزة للاستخدام لكل كتاب تفاعلي ومستند منشور. تنسخ مقتطف التضمين من خيارات المشاركة الخاصة بمنشورك وتلصقه في أيّ موقع أو مدونة أو نظام إدارة محتوى. ويتكيّف iframe تلقائياً مع عرض الحاوية، ويُقاس عارض الكتاب التفاعلي صفحاته وفقاً لذلك. ويتضمن كود التضمين التحميل البطيء افتراضياً، بحيث لا يتم تحميل الكتاب التفاعلي إلا عند الوصول إليه أثناء التمرير، مما يُحافظ على سرعة صفحتك. كما يمكنك استخدام ميزة [تضمين الصورة القابلة للنقر](/features/clickable-image-embed) لوضع صورة مصغّرة تفتح عارضاً متجاوباً كاملاً عند النقر — وهي مفيدة عندما تريد إظهار معاينة دون تحميل العارض الكامل فوراً.

يعمل التضمين المتجاوب عادةً من خلال إحدى تقنيتي CSS: - **حاوية بنسبة عرض إلى ارتفاع** — عنصر `div` مغلِّف بخاصية CSS `aspect-ratio` (مثلاً `aspect-ratio: 16 / 9`) و`width: 100%`. ويُضبط iframe بداخله ليملأ المغلِّف تماماً. وهذه هي المقاربة الحديثة وتدعمها جميع المتصفحات الحالية. - **حيلة padding-bottom** — تقنية أقدم يستخدم فيها المغلِّف خاصية `padding-bottom` بنسبة مئوية (مثلاً `56.25%` لنسبة 16:9) لإنشاء الارتفاع الصحيح نسبةً إلى العرض. ويُوضع iframe بداخله بمواقع مطلقة. ولا تزال هذه الطريقة مستخدمة على نطاق واسع لأغراض التوافق مع الإصدارات السابقة. يعتمد كود التضمين في FlipLink مقاربة aspect-ratio مع بديل احتياطي، مما يضمن التوافق عبر المتصفحات. وخصائص CSS الرئيسية هي `width: 100%`، و`height: auto`، و`border: none` على iframe، مع نسبة العرض إلى الارتفاع الخاصة بالمغلِّف. والنتيجة تضمين يأخذ العرض الكامل لأيّ حاوية يقع فيها ويُقاس ارتفاعه بشكل متناسب.

- **ضع التضمين داخل حاوية محدودة العرض** — إذا لصقت كود التضمين في قسم بعرض كامل، سيمتد الكتاب التفاعلي ليملأ منفذ العرض بأكمله. استخدم عمود محتوى أو مغلِّفاً بحدّ أقصى للعرض للحفاظ عليه بحجم قراءة مريح. - **تجنّب تحديد ارتفاعات ثابتة بالبكسل** — فهذا يُلغي الغرض من التضمين المتجاوب. اترك نسبة العرض إلى الارتفاع تتحكم في الارتفاع تلقائياً. - **اختبر على أحجام شاشات متعددة** — عاين صفحتك على سطح المكتب والجهاز اللوحي والهاتف لتأكيد قياس التضمين بشكل صحيح. تعمل محاكاة الأجهزة في DevTools المتصفح جيداً للفحوصات السريعة. - **استخدم التحميل البطيء للتضمينات أسفل الطيّ** — يتضمن كود التضمين في FlipLink التحميل البطيء افتراضياً، لكن إذا خصّصت الكود، احتفظ بسمة `loading="lazy"` لتجنّب إبطاء التحميل الأولي للصفحة. - **تضمين واحد لكل قسم منفذ عرض** — تضمين كتب تفاعلية متعددة في عرض تمرير واحد قد يُربك القرّاء ويُبطئ الصفحة. باعد بينها أو استخدم [clickable image embed](/features/clickable-image-embed) للسماح للقرّاء باختيار المنشور الذي يفتحونه.

1. **انشر كتابك التفاعلي** — لا يتوفر كود التضمين إلا بعد النشر 2. **انسخ كود التضمين** — اذهب إلى خيارات المشاركة الخاصة بمنشورك وانسخ مقتطف التضمين المتجاوب 3. **الصق في صفحتك** — أضف الكود إلى محرر HTML بموقعك، أو كتلة تضمين نظام إدارة المحتوى، أو أداة منشئ الصفحات 4. **تحقق من عرض الحاوية** — تأكّد أن العنصر الأصل له عرض محدد (نسبة مئوية أو حدّ أقصى للعرض) حتى يعرف التضمين بأيّ عرض يجب أن يُعرض 5. **عاين عبر الأجهزة** — افحص عروض سطح المكتب والجهاز اللوحي والهاتف لتأكيد القياس المتناسب 6. **افحص سرعة الصفحة** — شغّل تدقيق Lighthouse للتأكد من أن التضمين لا يؤثر سلباً على وقت التحميل أو درجات تغيّر التخطيط 7. **فكّر في تقييد النطاقات** — استخدم [القائمة البيضاء للنطاقات](/glossary/domain-whitelisting) لتقييد المواقع التي يمكنها تضمين منشوراتك

يضمن التضمين المتجاوب أن يظهر كتابك التفاعلي بشكل صحيح على كل شاشة دون أيّ تغيير حجم يدوي أو تعديلات خاصة بالأجهزة. وهو أبسط طريقة لوضع منشورات تفاعلية على أيّ موقع مع الحفاظ على تجربة احترافية وسريعة التحميل لكل قارئ.