X

X

X

রেসপনসিভ ওয়েব ডিজাইন - ভিডিও


বিভিন্ন উপায়ে একটি ভিডিওকে রেসপনসিভ করা যায়। নিচে কিছু উদাহরণ দেওয়া হলো।

width Property

যদি ভিডিও ইলামেন্টের width property এর মান 100% নির্ধারণ করা হয়, তবে ভিডিওটি রেসপনসিভ হবে।

Code Example

video {
    width: 100%;
    height: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লক্ষ্য করুন: ভিডিও-এর প্রস্থ ১০০% করার ফলে এমন হতে পারে, যদি ভিডিও-এর চাইতে ওয়েব পেজ বড় হয়, সেক্ষেত্রে ভিডিও কোয়ালিটি ভালো হবে না। সেক্ষেত্রে উক্ত প্রপার্টির সাথে max-width property এর মান নির্ধারণ করে দেওয়া উত্তম।


max-width Property

যদি max-width property এর মান 100% করা হয়, তবে video এর প্রস্থ কখনই ভিডিও-এর মূল আকারের চাইতে বেশি হবে না:

Code Example

video {
    max-width: 100%;
    height: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রেসপনসিভ ভিডিও-এর উদাহরণ

Code Example

video {
    width: 100%;
    height: auto;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।