কিভাবে ইউটিউব ভিডিও এম্বেডকে CSS দিয়ে প্রতিক্রিয়াশীল করা যায়

কীভাবে আপনার ওয়েবসাইটে YouTube ভিডিওগুলি এম্বেড করতে হয় তা শিখুন এবং CSS এর সাহায্যে মোবাইল থেকে ডেস্কটপ ডিভাইসে এটিকে সম্পূর্ণরূপে প্রতিক্রিয়াশীল করে তুলুন৷

আপনি YouTube থেকে এম্বেড ভিডিও কোড কপি করলে এবং আপনি একটি <iframe> পাবেন মোড়ক যা দেখতে এর মতো:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/uga8GWzdv3c"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

দুর্ভাগ্যবশত, ব্রাউজারে সঠিক আকৃতির অনুপাত সহ প্রদর্শনের জন্য আইফ্রেমের একটি নির্দিষ্ট উচ্চতা এবং প্রস্থের প্রয়োজন। এটি আইফ্রেমগুলিকে বাক্সের বাইরে প্রতিক্রিয়াশীল ডিজাইনের সাথে বেমানান করে তোলে৷

সৌভাগ্যবশত, আপনি একটি অভিভাবক কন্টেনারে আপনার আইফ্রেম মোড়ানোর মাধ্যমে আপনার ভিডিও এম্বেড করতে পারেন:

<div class="youtube-video-container">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/uga8GWzdv3c"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    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%

9 হল 56.25% 16 এর মধ্যে।

যদি আপনার এম্বেড করা ভিডিওর আকৃতির অনুপাত 4:3 হয়, তাহলে আপনি ভিডিও কন্টেইনারের উপরের প্যাডিংটি এভাবে গণনা করবেন:

3/4 * 100 =75%

ইত্যাদি।