কিভাবে Embed Responsive YouTube Video ডিজাইন করবেন?

প্রযুক্তির উন্নতি ও বিকাশের সাথে সাথে সবার চিন্তা-চেতনা যেমন আপডেট হচ্ছে তেমনি ওয়েব জগতের সবকিছুও দিন দিন আপডেট হওয়ার সাথে সাথে অনেক ওয়েব ডিজাইনের পরিবর্তন ও উন্নতি সাধিত হচ্ছে। এক সময় ছিল যখন ব্লগে শুধুমাত্র কোন রকম আর্টিকেল ছাপিয়ে একটি পোষ্ট করলেই পর্যাপ্ত ট্রাফিক পাওয়া যেত কিন্তু দিনের পর দিন প্রতিযোগিতায় টিকে থাকার জন্য সবাই নিত্য-নতুন কৌশল অবলম্বন করছেন, কিভাবে কি করলে সবার থেকে বেশী ভিজিটর পাওয়া যাবে। ব্লগিং জগতের প্রতিযোগিতার একটি বড় অংশ হচ্ছে Responsive ডিজাইন। কারণ এখন ইন্টারনেট শুধুমাত্র কম্পিউটারের মাধ্যমে ব্যবহার করা হয় না। প্রযুক্তির উন্নতির সাথে সাথে বিভিন্ন ধরনের ভালমানের মোবাইল, স্মার্টফোন, ট্যাবলেট ইত্যাদি ধরনের ডিভাইস এখন সবার হাতে হাতে পৌছে গেছে। যার ফলে ইন্টারনেটের অনেক প্রয়োজন এখন কম্পিউটারের মাধ্যমে না করে এ ধরনের ডিভাইস ব্যবহার করে মিটিয়ে নিচ্ছে। সবার চাহিদার কথা চিন্তা করে ডেভেলপরারও চাহিদা মোতাবেক ব্লগ ডিজাইন করে নিচ্ছেন।

কিভাবে ব্লগার টেমপ্লেটকে পরিপূর্ণ Responsive ডিজাইন করবেন তা নিয়ে আমরা ইতিপূর্বে একটি সিরিজ পোষ্টের মাধ্যমে বর্ণনা করেছি। তারপরও শুধুমাত্র ব্লগার টেমপ্লেটকে Responsive করলেই হয় না তার পাশাপাশি ব্লগের অন্য যে বিষয়গুলি আছে সেগুলিও Responsive করে নিতে হয়। তাহলে একজন ভিজিটর যে কোন ধরনের ডিভাইস থেকে ভিজিট করে আপনার ব্লগের সকল বিষয়বস্তু সম্পর্কে পরিষ্কার ধারনা নিতে পারবে। 

প্রত্যেক ব্লগে মাঝে মাধ্যে দু একটা Youtube Video পোষ্টের ভীতরে শেয়ার করতে হয়। সে ক্ষেত্রে দেখা যায় যদিও ভিডিও নরমালি কম্পিউটার ব্রাউজার থেকে সহজে দেখা যাচ্ছে কিন্তু ছোট ধরনের ডিভাইস থেকে দেখা যাচ্ছে না বা ভিডিওটি পোষ্টের বাহিরে চলে যাচ্ছে। এই সমস্যা থেকে পরিত্রান পাওয়ার জন্য আমরা এই ছোট্ট পোষ্টটি শেয়ার করছি।

 কিভাবে Responsive YouTube Video ডিজাইন করবেন?

• প্রথমে ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।

• এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
• তারপর নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।

.video-container{position:relative;border:7px solid #0197A2;border-radius:5px;padding-bottom:55%;padding-top:0px;height:0;overflow:hidden}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}

• এখন Save Template এ ক্লিক করুন।

 কিভাবে ভিডিও যুক্ত করবেন?

• আপনার ব্লগ পোষ্টের HTML Editor এ ক্লিক করুন।
• তারপর নিচের HTML কোডটি আপনার কাঙ্খিত জায়গায় পেষ্ট করুন।

<div class="video-container">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/BWUVSrW1B-Q"></iframe>
</div>

• উপরের Youtube Video লিংক এর শেষের লাল অংশটি হচ্ছে ভিডিও এর আইডি। এখানে আপনার ভিডিওটির আইডি দিতে হবে।
• সবশেষে পোষ্ট পাবলিশ করলেই কাজ OK.