Foundation ফ্রেমওয়ার্কে ভিডিও এমবেডস (Video Embeds) এবং রেসপনসিভ ভিডিও ক্লাসেস (Responsive Video Classes) ব্যবহার করা সহজ। এটি ডেভেলপারদের জন্য ভিডিও কন্টেন্টকে ওয়েবসাইটে এমনভাবে এমবেড করার সুযোগ দেয়, যাতে তা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হয়। Foundation রেসপনসিভ ডিজাইনের জন্য শক্তিশালী টুল হিসেবে কাজ করে, যা ভিডিও এমবেডসকে মোবাইল এবং ডেস্কটপে সমানভাবে উপযুক্ত করে তোলে।
Video Embeds
ভিডিও এমবেড হল একটি সহজ পদ্ধতি, যেখানে আপনি যেকোনো ভিডিও প্লাটফর্ম (যেমন, YouTube, Vimeo) থেকে ভিডিও কোড নিয়ে সরাসরি আপনার ওয়েব পেজে এমবেড করতে পারেন। Foundation এই কাজকে আরও সহজ এবং রেসপনসিভ বানিয়ে দেয়।
Foundation আপনাকে ভিডিও এমবেড করার জন্য একটি কাস্টম ক্লাস দেয়, যাতে ভিডিও নিজে থেকেই স্ক্রীনের সাইজ অনুযায়ী রেসপনসিভ হয়ে যায়। সাধারণভাবে, YouTube বা Vimeo ভিডিও এমবেড করতে iframe ট্যাগ ব্যবহার করা হয়।
উদাহরণ: YouTube ভিডিও এমবেড
<div class="flex-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
উদাহরণ: Vimeo ভিডিও এমবেড
<div class="flex-video">
<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
এখানে, flex-video ক্লাস ভিডিওটিকে রেসপনসিভ করবে এবং ভিডিওটি সমস্ত স্ক্রীন সাইজে সুন্দরভাবে প্রদর্শিত হবে।
Responsive Video Classes
Foundation এ ভিডিও এমবেড করতে flex-video ক্লাস ব্যবহৃত হয়। এটি একটি কাস্টম ক্লাস, যা ভিডিওর আকারকে স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী অ্যাডজাস্ট করে।
flex-video ক্লাস:
- flex-video ক্লাস ব্যবহার করলে ভিডিও তার প্রস্থ এবং উচ্চতা মোবাইল, ট্যাবলেট এবং ডেস্কটপের স্ক্রীন সাইজ অনুযায়ী অটো রিসাইজ হবে।
- এই ক্লাসটি ব্যবহার করার ফলে ভিডিওটি তার কন্টেইনারের প্রস্থ অনুযায়ী মাপ নিতে পারে এবং এতে কোনও স্ক্রোলিং বা ব্রেকিং হবে না।
উদাহরণ:
<div class="flex-video">
<iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe>
</div>
এটি একটি সাধারণ উদাহরণ, যেখানে YouTube বা Vimeo ভিডিও এমবেড করা হয়েছে। flex-video ক্লাসটি ভিডিওকে রেসপনসিভ করার জন্য সহায়তা করে।
ভিডিও কন্টেন্টের জন্য অন্যান্য ক্লাস
- .video-container: এই ক্লাসটি একটি নির্দিষ্ট কন্টেইনারে ভিডিও রাখা হলে তা স্বয়ংক্রিয়ভাবে রেসপনসিভ হবে।
- .embed-container: ভিডিও প্লাটফর্মে সাধারণত কিছু এমবেড স্টাইল থাকে, সেগুলোর সাথে এই ক্লাসটি ব্যবহৃত হতে পারে।
Video Embed এর জন্য Foundation এর বৈশিষ্ট্য
- রেসপনসিভ ভিডিও: Foundation স্বয়ংক্রিয়ভাবে ভিডিওটির আকার স্ক্রীনের সাইজ অনুযায়ী অ্যাডজাস্ট করে।
- সহজ ব্যবহার: ভিডিও এমবেড করা খুবই সহজ, শুধুমাত্র flex-video ক্লাস যোগ করতে হয়।
- ভিডিও কন্টেন্টের সুনির্দিষ্ট নিয়ন্ত্রণ: Foundation ফ্রেমওয়ার্ক ভিডিও এমবেডের কাস্টমাইজেশনের জন্য বিভিন্ন টুলস এবং ক্লাস সরবরাহ করে, যা ডেভেলপারদের আরো কাস্টম লেআউট তৈরি করতে সহায়তা করে।
Foundation ফ্রেমওয়ার্ক ভিডিও এমবেড করার জন্য একটি শক্তিশালী এবং সহজ উপায় প্রদান করে। এর flex-video ক্লাসটি ভিডিও কন্টেন্টকে রেসপনসিভ করে, যাতে তা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে প্রদর্শিত হয়। এই সুবিধার মাধ্যমে আপনি যেকোনো ভিডিও প্লাটফর্মের ভিডিও সহজেই ওয়েবসাইটে এমবেড করতে পারেন এবং ডিজাইনটিকে মোবাইল-ফার্স্ট অ্যাপ্রোচে তৈরি করতে পারেন।
Read more
