ওয়েব পেজ অর্থাৎ ওয়েব সাইট কে রেস্পন্সিভ ডিজাইন করার জন সকল প্রকার মাল্টিমিডিয়ার সাথে ভিডিও গুলোকেও রেস্পন্সিভ করতে হয়। ওয়েব পেজে প্রদর্শিত ভিডিও গুলো রেসপন্সিভ করতে সিএসএস এর width, max-width ইত্যাদি প্রোপার্টি ব্যবহার করা যায়।
নিচে একটি রেসপন্সিভ ভিডিও এর ব্যাবহারিক উদাহরন দেখুন।
এইচটিএমএল ভিডিও এলিমেন্টকে রেসপন্সিভ করার জন্য সিএসএস এর width ও height প্রোপার্টি ব্যবহার করা যায়। এর জন্য সিএসএস এর width প্রোপার্টির মান 100% নির্ধারণ করে ভিডিও প্লেয়ারটিকে রেস্পন্সিভ করা হয়। এর ফলে ভিডিও প্লেয়ারটির প্রস্থ বা width এ কোন পরিবর্তন হয় না, ব্রাউজার উইন্ডোর ওপর নির্ভর করে কেবল মাত্র উপরে ও নিচে অর্থাৎ উচ্ছতায় বাড়তে/কমতে পারে।
সিএসএস এর width ও height প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
video {
width: 100%;
height: auto;
}
এখানে একটি ব্যাপার লক্ষ্য রাখতে হবে, স্ক্রীন এর আকারের কারনে, ভিডিও প্লেয়ারটি কখনও কখনও তার নিজস্ব আকারের থেকে বড় হতে পারে। এর ফলে ভিডিওটি ভাল মত প্রদর্শিত হবে না। এই সমস্যা সমাধানের জন্য সিএসএস এর max-width প্রোপার্টি ব্যবহার করা যায়।
width প্রোপার্টি ব্যবহাররের ফলে, স্ক্রীন এর আকারের কারনে, ভিডিও প্লেয়ারটি কখনও কখনও তার নিজস্ব আকারের থেকে বড় হতে পারে। এর ফলে ভিডিওটি নিম্নমানের হয়ে প্রদর্শিত হবে।
কিন্তু সিএসএস এর max-width প্রপার্টি ব্যবহার করার ফলে ভিডিও প্লেয়ারটি কখনই তার নিজস্ব বা সত্যিকার আকার বা size এর থেকে বড় হবে না, কিন্তু ওয়েব ব্রাউজার উইন্ডোর সাথে সামঞ্জস্য রেখে প্রয়োজন মত ছোট হতে পারবে। এর ফলে ভিডিওটি পরিস্কার ভাবে দেখা যাবে।
max-width প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
video {
max-width: 100%;
height: auto;
}
নিচে স্টাইল কোড সহ একটি উদাহরণ দেখুন, যেখানে ওয়েব পেজে একটি ভিডিও যোগ করা হয়েছে যা কিনা সম্ভাব্য সম্পূর্ন জায়গা দখল করবে।
<style>
video {
width: 100%;
height: auto;
}
</style>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
এইচটিএমএল এর ভিডিও সম্পর্কে আর জানতে আমাদের এইচটিএমএল ভিডিও টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
শেয়ার করুন
