उत्तरदायी वेब डिज़ाइन - वीडियो
चौड़ाई संपत्ति का उपयोग करना
अगर width
प्रॉपर्टी को 100% पर सेट किया जाता है, तो वीडियो प्लेयर रिस्पॉन्सिव होगा और स्केल अप और डाउन होगा:
उदाहरण
video {
width: 100%;
height: auto;
}
ध्यान दें कि ऊपर दिए गए उदाहरण में, वीडियो प्लेयर को उसके मूल आकार से बड़ा किया जा सकता है। एक बेहतर समाधान, कई मामलों में,
max-width
इसके बजाय संपत्ति का उपयोग करना होगा।
अधिकतम-चौड़ाई वाली संपत्ति का उपयोग करना
अगर max-width
प्रॉपर्टी को 100% पर सेट किया जाता है, तो वीडियो प्लेयर का आकार कम हो जाएगा, लेकिन उसके मूल आकार से बड़ा होने के लिए कभी भी स्केल नहीं किया जाएगा:
उदाहरण
video {
max-width: 100%;
height: auto;
}
उदाहरण वेब पेज में एक वीडियो जोड़ें
हम अपने उदाहरण वेब पेज में एक वीडियो जोड़ना चाहते हैं। वीडियो को हमेशा सभी उपलब्ध स्थान लेने के लिए आकार दिया जाएगा:
उदाहरण
video {
width: 100%;
height: auto;
}