YouTube ভিডিও ওয়েবসাইটে এমবেড করে মোবাইল থেকে ডেস্কটপ পর্যন্ত ফুল রেসপন্সিভ করা শিখুন।
YouTube-র এমবেড কোডে <iframe> থাকে যার ফিক্সড width/height থাকে—রেসপন্সিভ ডিজাইনের সাথে কম্প্যাটিবল নয়।
সমাধান: প্যারেন্ট কন্টেইনার দিয়ে র্যাপ করুন
<div class="youtube-video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>
</div>CSS স্টাইলিং
.youtube-video-container { position: relative; overflow: hidden; width: 100%; }
.youtube-video-container::after { display: block; content: ""; padding-top: 56.25%; }
.youtube-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }এসপেক্ট রেশিও ক্যালকুলেশন
56.25% প্যাডিং-টপ YouTube-এর 16:9 এসপেক্ট রেশিও থেকে এসেছে:
9/16 * 100 = 56.25%
যদি ভিডিওর এসপেক্ট রেশিও 4:3 হয়, তবে 3/4 * 100 = 75% প্যাডিং-টপ ব্যবহার করুন।
