रिस्पोन्सिव वेबपेज डिजाइन - वीडियो

width अट्रिब्यूट का उपयोग करें

यदि width 100% अट्रिब्यूट रेटिंग किया जाता है तो वीडियो प्लेयर प्रतिक्रियाशील रूप से बढ़ और छोटा होगा:

video {
  width: 100%;
  height: auto;
}

ध्यान दें कि ऊपरी उदाहरण में वीडियो प्लेयर असल आकार से बड़ा हो सकता है।अनेक स्थितियों में बेहतर समाधान max-width अट्रिब्यूट का उपयोग करना है。

यदि max-width अट्रिब्यूट 100% रेटिंग किया जाता है तो वीडियो प्लेयर संतुलित रूप से छोटा और बड़ा हो सकता है, लेकिन कभी भी असल आकार से बड़ा नहीं होगा:

video {
  max-width: 100%;
  height: auto;
}

हम इंस्टांस वेबपेज में वीडियो जोड़ना चाहते हैं।वीडियो को आकार कर दिया जाएगा ताकि यह हमेशा सभी उपलब्ध जगह को भरे:

video {
  width: 100%;
  height: auto;
}