সমস্যা: iOS Safari-এ ভিডিওর আস্পেক্ট রেশিও মেইনটেইন করে না
পুরনো iOS Safari-এ `
CSS সমাধান (Aspect Ratio Box)
<div id="video-box"> <video src="movie.mp4" controls></video> </div>
ব্যাখ্যা
- `padding-top: 56.25%` → এলিমেন্টের হাইট এর প্রস্থের ৫৬.২৫% হয় (১৬:৯ রেশিও)۔
- ভিডিও `position: absolute` + `width/height: 100%` দিয়ে বক্সটি পূরণ করে।
- এটি সব ব্রাউজার এবং iOS Safari (পুরনো ভার্সন সহ)-এ কাজ করে।
আধুনিক বিকল্প (CSS Aspect Ratio)