طراحی وب واکنش‌گرا - ویدیو
- صفحه قبل تصویر RWD
- صفحه بعدی بخش‌های شبکه‌ای CSS
از ویژگی width استفاده کنید
اگر width تنظیم ویژگی به 100%， پخش‌کننده ویدیو به طور خودکار پاسخ خواهد داد و بزرگ‌تر یا کوچک‌تر خواهد شد:
مثال
video {
width: 100%;
height: auto;
}
لطفاً توجه داشته باشید که در مثال بالا، پخش‌کننده ویدیو می‌تواند بزرگ‌تر از اندازه اصلی خود شود. در بسیاری از موارد، راه‌حل بهتری استفاده از ویژگی max-width است.
از ویژگی max-width استفاده کنید
اگر max-width تنظیمات ویژگی به 100%، پخش‌کننده ویدیو به تناسب اندازه کوچک‌تر خواهد شد، اما هرگز بزرگ‌تر از اندازه اصلی خود نخواهد شد:
مثال
video {
max-width: 100%;
height: auto;
}
افزودن ویدیو به صفحه نمونه
ما امیدواریم که بتوانیم ویدیو را به صفحه نمونه اضافه کنیم. ویدیو به گونه‌ای تنظیم خواهد شد که همیشه فضای قابل استفاده را اشغال کند:
مثال
video {
width: 100%;
height: auto;
}
- صفحه قبل تصویر RWD
- صفحه بعدی بخش‌های شبکه‌ای CSS
