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