كيفية تكرار حجم الخلفية: الغلاف على عناصر

عند العمل مع عناصر HTML مثل

CSS Approach

باستخدام CSS وحده، يمكنك إنشاء محاكاة غلاف مثالية لمقاطع الفيديو دون الاعتماد على البرامج النصية. تكمن الحيلة في حساب عرض الفيديو وارتفاعه بدقة بالنسبة إلى نسبة العرض إلى الارتفاع للعنصر الأصلي. على سبيل المثال، إذا كان الفيديو الخاص بك يحتوي على نسبة عرض إلى ارتفاع تبلغ 16:9:

.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

توسيط الفيديو

إذا كنت بحاجة أيضًا إلى توسيط الفيديو، فإن CSS التالي سيوفر طريقة موثوقة:

/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

اعتبارات التوافق

بينما يعمل هذا الحل بشكل لا تشوبه شائبة في المتصفحات المتوافقة مع CSS3، قد تتطلب المتصفحات القديمة أسلوبًا يعتمد على البرنامج النصي لتحقيق النتيجة المرجوة.