تنسيق فيديو بالخلفية ب HTML و CSS

ذلك هو المشروع بالتعديلات التي أخبرتك بها، مع تقليل حجم صورة الهاتف إلى 50%.

وتعديل تنسيق الفيديو إلى:

section#Home video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -100;
}

project-web.rar

الخطأ الأول فى عنصر section الذى يحوى id يساوى Home لقد قمت باعطائه الخاصية 

margin-top: 150px;

  لهذا تجد المسافة كبيرة لذلك قم بتغيرها الى 60px وسيعمل معك .

اما بالنسبة للمشكلة الثانية فانت قمت بوضع الخاصية 

min-height: 100%;

اى تشغل اصغير طول للفيديو هو 100% . ولذلك الحل هو استخدام الخاصية height لكن اعطائها قيمة ب هكذا 

    height: 50%;

بتاريخ 7 دقائق مضت قال محمد_عاطف:

الخطأ الأول فى عنصر section الذى يحوى id يساوى Home لقد قمت باعطائه الخاصية 

margin-top: 150px;

  لهذا تجد المسافة كبيرة لذلك قم بتغيرها الى 60px وسيعمل معك .

اما بالنسبة للمشكلة الثانية فانت قمت بوضع الخاصية 

min-height: 100%;

اى تشغل اصغير طول للفيديو هو 100% . ولذلك الحل هو استخدام الخاصية height لكن اعطائها قيمة ب هكذا 

 

جرب هذا الحل ولكن كانت النتيجة 

    height: 50%;

بتاريخ 12 دقائق مضت قال Ahmed Farid5:

جرب هذا الحل ولكن كانت النتيجة 

    height: 50%;

 

نعم يوجد خطأ اخر هو انك قمت بوضع ال position ب fixed لذلك تجد الفيديو موجود فى كل الصفحة حيث انك قد اعطيته مكان ثابت فى الصفحة والحل هو استخدام قيمة absolute . واذا اردت ان ياخذ كام ال section نضع خاصية width و height ب 100% . 

بعد هذا ستقابلك مشكلة اخرى فى عنصر الذى يحوى class يساوى overlay فلم تقم باعطائه طول للعنصر لذلك ستجده اقل من طول الفيديو.

واكواد الحل كالتالى.

section#Home video {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}
section#Home .overlay {
    background-color: rgba(255, 255, 255, 0.7);
    height: 100%;
}

بتاريخ On 24‏/4‏/2024 at 11:28 قال محمد_عاطف:

نعم يوجد خطأ اخر هو انك قمت بوضع ال position ب fixed لذلك تجد الفيديو موجود فى كل الصفحة حيث انك قد اعطيته مكان ثابت فى الصفحة والحل هو استخدام قيمة absolute . واذا اردت ان ياخذ كام ال section نضع خاصية width و height ب 100% . 

بعد هذا ستقابلك مشكلة اخرى فى عنصر الذى يحوى class يساوى overlay فلم تقم باعطائه طول للعنصر لذلك ستجده اقل من طول الفيديو.

واكواد الحل كالتالى.

section#Home video {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}
section#Home .overlay {
    background-color: rgba(255, 255, 255, 0.7);
    height: 100%;
}

كانت تواجهني نفس المشكلة ايضا ... واكن ولصت لحل وهو عن طريق خاصية object-fit بعد البحث وكانت هي الحل

section#Home video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

 وحلت المشكلة

بتاريخ 1 ساعة قال Ahmed Farid5:

 

كانت تواجهني نفس المشكلة ايضا ... واكن ولصت لحل وهو عن طريق خاصية object-fit بعد البحث وكانت هي الحل

section#Home video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

 وحلت المشكلة

ذلك مذكور في التعليق من البداية يبدوا أنك لم تنتبه إليه: