CSS width प्रॉपर्टी से रिस्पॉन्सिव वीडियो प्लेयर

वीडियो प्लेयर को रिस्पॉन्सिव बनाने के लिए width: 100% और height: auto सेट करें। वीडियो अपने पैरेंट कंटेनर की चौड़ाई के अनुसार स्केल होगा, एस्पेक्ट रेशियो बनाए रखते हुए।

उदाहरण: रिस्पॉन्सिव वीडियो

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    video {
      width: 100%;
      height: auto;
      max-width: 100%;  /* पैरेंट से बड़ा न हो */
    }
  </style>
</head>
<body>
  <video width="300" controls autoplay muted>
    <source src="/html5/foo.ogg" type="video/ogg">
    <source src="/html5/foo.mp4" type="video/mp4">
    आपका ब्राउज़र वीडियो टैग सपोर्ट नहीं करता।
  </video>
  <p>प्रभाव देखने के लिए ब्राउज़र विंडो रिसाइज़ करें।</p>
</body>
</html>

बेहतर दृष्टिकोण: एस्पेक्ट रेशियो बनाए रखें

केवल width: 100% से वीडियो बहुत लंबा/छोटा हो सकता है। aspect-ratio प्रॉपर्टी (मॉडर्न) या पैडिंग-टॉप हैक का उपयोग करें:

/* मॉडर्न तरीका (CSS Aspect Ratio) */
.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* पुराना पैडिंग-टॉप हैक (सभी ब्राउज़र्स) */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9 एस्पेक्ट रेशियो */
  height: 0;
}
.video-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

अतिरिक्त टिप्स

• controls - ब्राउज़र के डिफ़ॉल्ट कंट्रोल्स दिखाएं
• muted - ऑटोप्ले के लिए आवश्यक (ब्राउज़र पॉलिसी)
• preload="metadata" - केवल मेटाडेटा लोड करें, बैंडविड्थ बचाएं
• poster="thumb.jpg" - लोड होने से पहले थंबनेल दिखाएं