CSS max-width প্রোপার্টি দিয়ে রেসপন্সিভ ভিডিও প্লেয়ার

max-width: 100% ব্যবহার করে ভিডিও প্লেয়ারকে রেসপন্সিভ করা যায়, যাতে এটি তার মূল আকার থেকে বড় না হয়।

উদাহরণ

<!DOCTYPE html> <html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
      video { 
        max-width: 100%; 
        height: auto; 
      } 
    </style> 
  </head> 
  <body> 
    <video width="300" controls autoplay> 
      <source src="/html5/foo.ogg" type="video/ogg" /> 
      <source src="/html5/foo.mp4" type="video/mp4" /> 
    </video> 
    <p>To check the effect, you need to resize the browser.</p> 
  </body> 
</html>

ব্যাখ্যা: max-width: 100% ভিডিওকে প্যারেন্ট কন্টেইনারের চেয়ে বড় হওয়া থেকে রোধ করে। height: auto অ্যাসপেক্ট রেশিও রক্ষা করে। width: 100% এর চেয়ে এটি ভালো, কারণ ছোট ভিডিও বড় হয়ে পিক্সেলেট হবে না।