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