Foundation ফ্রেমওয়ার্কের একটি বিশেষ বৈশিষ্ট্য হলো Flex Video, যা ভিডিও কন্টেন্টকে বিভিন্ন ডিভাইসে রেসপনসিভভাবে প্রদর্শন করতে সাহায্য করে। সাধারণত, ভিডিওগুলি সঠিক স্কেল এবং লেআউট পেতে বেশিরভাগ সময় কাস্টম কোডিং বা CSS প্রয়োজন হয়। Foundation এর Flex Video ক্লাস এই প্রক্রিয়াটি সহজ করে দেয়।
Flex Video এর সুবিধা:
- রেসপনসিভ ভিডিও: Flex Video ব্যবহার করলে ভিডিও স্বয়ংক্রিয়ভাবে স্ক্রীনের আকার অনুযায়ী অটোমেটিক রিসাইজ হয়ে যায়।
- আনকাজে থাকা স্টাইল: এটি কোন অতিরিক্ত CSS কোড না লিখেই ভিডিও এলিমেন্টকে উপযুক্ত আকারে প্রদর্শন করতে সক্ষম।
- সহজ ইমপ্লিমেন্টেশন: একটি সহজ ক্লাস যুক্ত করে আপনি ভিডিওগুলোকে রেসপনসিভ করতে পারেন, যার ফলে কোড লেখা এবং কাস্টমাইজেশন আরও সহজ হয়ে যায়।
Flex Video ব্যবহার করা
Foundation ফ্রেমওয়ার্কে Flex Video ব্যবহার করতে আপনাকে শুধুমাত্র flex-video ক্লাসটি ভিডিও কন্টেইনারের উপর প্রয়োগ করতে হবে। এটি ভিডিও এলিমেন্টের প্রকৃত আকার এবং অনুপাত (aspect ratio) ধরে রেখে রেসপনসিভ ডিজাইন তৈরি করবে।
Flex Video ব্যবহার করার উদাহরণ:
<div class="flex-video">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
এখানে, flex-video ক্লাসটি ভিডিও কন্টেইনার <div> এর মধ্যে যোগ করা হয়েছে, যাতে ভিডিওটি রেসপনসিভভাবে স্ক্রীনে ফিট হয়।
বিভিন্ন ভিডিও প্ল্যাটফর্মের সাথে Flex Video
Foundation এর Flex Video ফিচারটি অনেক জনপ্রিয় ভিডিও প্ল্যাটফর্মের (যেমন YouTube, Vimeo, Dailymotion) সাথে কাজ করে। নিচে কিছু উদাহরণ দেওয়া হলো:
১. YouTube ভিডিও
<div class="flex-video">
<iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
২. Vimeo ভিডিও
<div class="flex-video">
<iframe src="https://player.vimeo.com/video/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
৩. Dailymotion ভিডিও
<div class="flex-video">
<iframe src="https://www.dailymotion.com/embed/video/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Flex Video এর কার্যকারিতা
Foundation এর Flex Video ক্লাস ব্যবহার করার মাধ্যমে, ভিডিওর অরিজিনাল আকার বা অ্যানিমেশন হুবহু রাখা সম্ভব। এটি ভিডিও এলিমেন্টের aspect ratio ধরে রেখে সেটি স্ক্রীনের উপযুক্ত আকারে রিসাইজ করে দেয়। ফলে ভিডিও কনটেন্ট মোবাইল, ট্যাবলেট, ডেস্কটপসহ যেকোনো ডিভাইসে একদম সঠিকভাবে প্রদর্শিত হয়।
ভিডিওর aspect ratio:
Foundation স্বয়ংক্রিয়ভাবে ভিডিওর প্রস্থ এবং উচ্চতা ঠিক রাখতে সাহায্য করে, যাতে ভিডিওটি তার অরিজিনাল প্রোপোরশন অনুযায়ী স্কেল হয়। এর ফলে, বিভিন্ন ডিভাইসের স্ক্রীনে ভিডিও দেখার সময় এটি বিকৃত হয় না।
আরও কাস্টমাইজেশন
আপনি চাইলে Flex Video এর মাধ্যমে কাস্টম ভিডিও সাইজিং এবং অবস্থান নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, যদি আপনি ভিডিওটিকে সেন্টারে রাখতে চান, তাহলে Flexbox এর ক্ষমতা ব্যবহার করতে পারেন।
সেন্টার করা ভিডিও:
<div class="row">
<div class="small-12 medium-8 large-6 columns">
<div class="flex-video">
<iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
এখানে columns ক্লাস ব্যবহার করে ভিডিওকে সেন্টার করা হয়েছে এবং বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত আকার প্রদান করা হয়েছে।
Foundation এর Flex Video ফিচার ভিডিও কন্টেন্টকে রেসপনসিভ এবং প্রোফেশনালভাবে ডিজাইন করতে সহজ করে তোলে। এটি সহজে YouTube, Vimeo, Dailymotion সহ অন্যান্য ভিডিও প্ল্যাটফর্মের সাথে কাজ করে, এবং ভিডিওর প্রোপোরশন সঠিকভাবে ধরে রেখে তা যেকোনো স্ক্রীনে উপযুক্ত আকারে প্রদর্শিত হয়। এই ফিচারটি ব্যবহার করে ডেভেলপাররা খুব সহজেই ভিডিও কন্টেন্টকে মোবাইল, ট্যাবলেট, ডেস্কটপের জন্য অপ্টিমাইজড করতে পারেন।
Read more
