সিএসএস রেস্পন্সিভ ভিডিও - Css Responsive Video



width প্রপার্টির ব্যবহার

ভিডিও এলিমেন্টের width প্রোপার্টির মান 100% নির্ধারণ করে ভিডিও প্লেয়ারটিকে রেস্পন্সিভ করা হয়। এর ফলে প্লেয়ারটি প্রস্থে পরিবর্তন হয় না, কেবল মাত্র উপরে ও নিচে অর্থাৎ উতছহতায় বাড়তে/কমতে পারে।

উদাহরণ

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


এখানে একটি ব্যাপার খেয়াল রাখতে হবে যে, ভিডিও প্লেয়ারটি কখনও কখনও তার মূল আকারের থেকে বড় হতে পারে। এর ফলে ভিডিওটি ভাল মত প্রদর্শিত হবে না। এটার একটি ভাল সমাধান হল, max-width ব্যবহার করা।


max-width প্রোপার্টি

max-width প্রপার্টি ব্যবহার করার ফলে ভিডিও প্লেয়ারটি কখনই তার সত্যিকার আকার বা size এর থেকে বর হবে না, কিন্তু ব্রাউজার উইন্ডোর সাথে সামঞ্জস্য রেখে প্রয়োজন মত ছোট হতে পারবে। এর ফলে ভিডিওটি পরিস্কার ভাবে দেখা যাবে।

উদাহরণ

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




ভিডিও যোগ করা

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

এইচটিএমএল

<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>



সিএসএস

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








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.