ব্লগারে ইউটিউব শর্টস ভিডিও এমবেড করার সেরা উপায়: রেসপনসিভ HTML এবং CSS কোড
বর্তমান সময়ে ইউটিউব শর্টস (YouTube Shorts) ভিডিও কন্টেন্ট ক্রিয়েটর এবং দর্শক উভয়ের কাছেই অত্যন্ত জনপ্রিয়। অনেক সময় আমরা আমাদের তৈরি করা ছোট ভিডিওগুলো নিজেদের ব্লগ বা ওয়েবসাইটে শেয়ার করতে চাই। কিন্তু যারা গুগল ব্লগার (Blogger) প্ল্যাটফর্ম ব্যবহার করেন, তারা একটি সাধারণ সমস্যার সম্মুখীন হন। ইউটিউব থেকে ডিফল্ট যে এমবেড কোড পাওয়া যায়, তা ব্লগারে ব্যবহার করলে ভিডিওর আকার বা সাইজ ঠিক থাকে না। অনেক সময় ভিডিওটি খুব ছোট হয়ে যায়, আবার কখনো স্ক্রিনের একপাশে চ্যাপ্টা হয়ে থাকে, যার ফলে নিচে বা চারপাশে অনেকখানি কালো অথবা খালি জায়গা দেখা যায়।
এটি আপনার ওয়েবসাইটের লুক বা ডিজাইন নষ্ট করার পাশাপাশি ভিজিটরদের বিরক্তির কারণ হতে পারে। আজকের এই আর্টিকেলে আমি আপনাদের জন্য এমন একটি স্পেশাল Responsive YouTube Shorts Embed Code নিয়ে এসেছি, যা ব্যবহার করলে আপনার ব্লগারে যেকোনো শর্টস ভিডিও একদম নিখুঁত মাপে এবং মোবাইল ফ্রেন্ডলি স্টাইলে প্রদর্শিত হবে।
কেন সাধারণ এমবেড কোড ব্লগারে কাজ করে না?
ইউটিউবের সাধারণ এমবেড কোডগুলো মূলত ল্যান্ডস্কেপ বা ১৬:৯ (16:9) অনুপাতের ভিডিওর জন্য তৈরি। অন্যদিকে, শর্টস ভিডিওগুলো হয় পোট্রেট বা ৯:১৬ (9:16) অনুপাতের। ব্লগার থিমের ডিফল্ট সিএসএস (CSS) অনেক সময় এই লম্বাটে ফ্রেমকে সাপোর্ট করতে পারে না, ফলে ভিডিওটি উপরে এবং নিচে সংকুচিত হয়ে যায়। আমাদের দেওয়া এই কাস্টম কোডে আমরা !important ট্যাগ এবং নির্দিষ্ট হাইট-উইডথ (Height-Width) ব্যবহার করেছি, যা আপনার ব্লগের ডিফল্ট কোডকে ওভাররাইড করে ভিডিওটিকে সঠিক কাঠামোতে রাখে।
এই স্পেশাল কোডটির বিশেষত্ব কী?
১. সম্পূর্ণ রেসপনসিভ: এটি কম্পিউটার, ল্যাপটপ, ট্যাবলেট বা মোবাইল—সব ডিভাইসেই ভিডিওর আকার অনুযায়ী নিজেকে মানিয়ে নেয়। ২. আধুনিক ডিজাইন: এতে আমরা বর্ডার রেডিয়াস (Border Radius) এবং হালকা ড্রপ শ্যাডো (Drop Shadow) যোগ করেছি, যা ভিডিওটিকে একটি আধুনিক মোবাইল অ্যাপের মতো লুক দেয়। ৩. ফিক্সড ডাইমেনশন: কোডটিতে ৩২০ পিক্সেল প্রস্থ এবং ৫৭০ পিক্সেল উচ্চতা ব্যবহার করা হয়েছে, যা শর্টস ভিডিওর জন্য বিশ্বজুড়ে স্বীকৃত আদর্শ মাপ। ৪. সহজ কাস্টমাইজেশন: আপনাকে কোনো গভীর কোডিং জানতে হবে না। শুধু আমাদের দেওয়া কোডটি কপি করে আপনার ভিডিও আইডিটি বসিয়ে দিলেই কাজ শেষ!
কিভাবে কোডটি আপনার ব্লগারে ব্যবহার করবেন?
আমাদের ওয়েবসাইট থেকে কোডটি সংগ্রহ করার পর নিচের ধাপগুলো অনুসরণ করুন:
প্রথমে আপনার ইউটিউব শর্টস ভিডিওর লিঙ্ক থেকে ১১ সংখ্যার আইডিটি (যেমন:
GliE-BYbkXc) কপি করে নিন।আপনার ব্লগারের পোস্ট এডিটরে গিয়ে বাম পাশের পেনসিল আইকন থেকে HTML View সিলেক্ট করুন।
যেখানে ভিডিওটি দেখাতে চান সেখানে নিচের কোডটি পেস্ট করুন।
কোডের ভেতরে থাকা "আপনার_ভিডিও_আইডি_এখানে" লেখাটি মুছে আপনার কপি করা আইডিটি বসিয়ে দিন।
পোস্টটি সেভ বা আপডেট করুন।
আপনার পাঠকদের সুবিধার্থে আমি নিচে এই কার্যকরী কোডটি শেয়ার করলাম। আশা করি এটি আপনার ব্লগিং ক্যারিয়ারে এবং সাইটের ইউজার এক্সপেরিয়েন্স বাড়াতে সাহায্য করবে। টেকনিক্যাল যেকোনো প্রয়োজনে Pedia Tech Lab সবসময় আপনার পাশে আছে।