CSS width প্রোপার্টি দিয়ে রেসপন্সিভ ভিডিও প্লেয়ার তৈরি করুন

ভিডিও প্লেয়ারকে রেসপন্সিভ করতে width: 100% এবং height: auto সেট করতে হয়। ভিউপোর্ট মেটা ট্যাগও জরুরি।

উদাহরণ

নিচের কোডটি চালিয়ে রেসপন্সিভ ভিডিও প্লেয়ার তৈরি করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
      video { 
        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>

ব্যাখ্যা: width: 100% ভিডিওকে প্যারেন্ট কন্টেইনারের প্রস্থ অনুযায়ী রিসাইজ করতে দেয়। height: auto অ্যাসপেক্ট রেশিও রক্ষা করে। <meta name="viewport"> মোবাইল ডিভাইসে সঠিক স্কেলিং নিশ্চিত করে।