شرح صفوف ومحتوى الفقرة
يؤدي إدراج مشغل فيديو بعرض ثابت مثل width="640" داخل شاشة هاتف عرضها 360px إلى اندفاع نصف المشغل خارج حدود النافذة، فتختفي أزرار التحكم ويظهر شريط تمرير أفقي يفسد تجربة التصفح بالكامل.
يتحول المشغل الجامد فوراً إلى عنصر متجاوب مرن عند الجمع بين max-width: 100% و height: auto و display: block ليتقلص بسلاسة داخل أي حاوية ضيقة:
HTML
.video-player {
max-width: 100%;
height: auto;
display: block;
border-radius: 10px;
}